@sebgroup/green-core 2.22.1 → 2.23.0

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

@@ -75,6 +75,46 @@ declare class Input extends GdsFormControlElement<string> {
     }) => readonly [number, false | "positive" | "negative"];
     private elInputAsync;
     private elInput;
+    /**
+     * Move focus to the input element.
+     */
+    focus(options?: FocusOptions): void;
+    /**
+     * Selects all the text in the input element.
+     */
+    select(): void;
+    /**
+     * Sets the value of the input element, replacing a range of text.
+     */
+    setRangeText(...args: Parameters<HTMLInputElement['setRangeText']>): void;
+    /**
+     * Sets the start and end positions of a selection in the input element.
+     */
+    setSelectionRange(...args: Parameters<HTMLInputElement['setSelectionRange']>): void;
+    /**
+     * Opens the browser's picker interface for inputs that support it (e.g., date picker for date inputs).
+     */
+    showPicker(): void;
+    /**
+     * Decreases the value of the input element by the specified step.
+     */
+    stepDown(n?: number): void;
+    /**
+     * Increases the value of the input element by the specified step.
+     */
+    stepUp(n?: number): void;
+    /** The position of the start of the current text selection in the input element. */
+    get selectionStart(): number | null;
+    /** Sets the position of the start of the current text selection in the input element. */
+    set selectionStart(value: number | null);
+    /** The position of the end of the current text selection in the input element. */
+    get selectionEnd(): number | null;
+    /** Sets the position of the end of the current text selection in the input element. */
+    set selectionEnd(value: number | null);
+    /** The direction of the current text selection in the input element. */
+    get selectionDirection(): "none" | "backward" | "forward" | null;
+    /** Sets the direction of the current text selection in the input element. */
+    set selectionDirection(value: "none" | "backward" | "forward" | null);
     /**
      * A reference to the clear button element. Returns null if there is no clear button.
      * Intended for use in integration tests.
@@ -87,7 +127,6 @@ declare class Input extends GdsFormControlElement<string> {
      */
     test_getFieldElement(): Element | null | undefined;
     constructor();
-    focus(options?: FocusOptions): void;
     render(): any;
     private _handleValueChange;
     _getValidityAnchor(): HTMLInputElement;

package/components/input/input.component.js

@@ -74,6 +74,82 @@ let Input = class extends GdsFormControlElement {
     });
     this.value = "";
   }
+  /**
+   * Move focus to the input element.
+   */
+  focus(options) {
+    this._getValidityAnchor()?.focus(options);
+  }
+  /**
+   * Selects all the text in the input element.
+   */
+  select() {
+    this._getValidityAnchor()?.select();
+  }
+  /**
+   * Sets the value of the input element, replacing a range of text.
+   */
+  setRangeText(...args) {
+    this._getValidityAnchor()?.setRangeText(...args);
+    this.value = this._getValidityAnchor()?.value || "";
+  }
+  /**
+   * Sets the start and end positions of a selection in the input element.
+   */
+  setSelectionRange(...args) {
+    this._getValidityAnchor()?.setSelectionRange(...args);
+  }
+  /**
+   * Opens the browser's picker interface for inputs that support it (e.g., date picker for date inputs).
+   */
+  showPicker() {
+    this._getValidityAnchor()?.showPicker();
+  }
+  /**
+   * Decreases the value of the input element by the specified step.
+   */
+  stepDown(n) {
+    this._getValidityAnchor()?.stepDown(n);
+  }
+  /**
+   * Increases the value of the input element by the specified step.
+   */
+  stepUp(n) {
+    this._getValidityAnchor()?.stepUp(n);
+  }
+  /** The position of the start of the current text selection in the input element. */
+  get selectionStart() {
+    return this._getValidityAnchor()?.selectionStart;
+  }
+  /** Sets the position of the start of the current text selection in the input element. */
+  set selectionStart(value) {
+    const anchor = this._getValidityAnchor();
+    if (anchor) {
+      anchor.selectionStart = value;
+    }
+  }
+  /** The position of the end of the current text selection in the input element. */
+  get selectionEnd() {
+    return this._getValidityAnchor()?.selectionEnd;
+  }
+  /** Sets the position of the end of the current text selection in the input element. */
+  set selectionEnd(value) {
+    const anchor = this._getValidityAnchor();
+    if (anchor) {
+      anchor.selectionEnd = value;
+    }
+  }
+  /** The direction of the current text selection in the input element. */
+  get selectionDirection() {
+    return this._getValidityAnchor()?.selectionDirection;
+  }
+  /** Sets the direction of the current text selection in the input element. */
+  set selectionDirection(value) {
+    const anchor = this._getValidityAnchor();
+    if (anchor) {
+      anchor.selectionDirection = value;
+    }
+  }
   /**
    * A reference to the clear button element. Returns null if there is no clear button.
    * Intended for use in integration tests.
@@ -89,9 +165,6 @@ let Input = class extends GdsFormControlElement {
   test_getFieldElement() {
     return this.shadowRoot?.querySelector("#field");
   }
-  focus(options) {
-    this._getValidityAnchor()?.focus(options);
-  }
   render() {
     return html`
       ${when(

package/components/table/table.styles.js

@@ -153,7 +153,6 @@ const TableStyles = css`
 
   thead tr th {
     padding-block: var(--gds-sys-space-3xs);
-    /*  background: var(--gds-sys-color-l2-neutral-01); */
     background: var(--_table-header-bg);
   }
 
@@ -254,12 +253,10 @@ const TableStyles = css`
 
   @media (hover: hover) and (min-width: 768px) {
     tbody tr.selected:hover {
-      /*     background-color: var(--gds-sys-color-l3-neutral-03); */
       background-color: var(--_table-row-selected-hover);
     }
 
     tbody tr:hover:not(.selected) {
-      /*       background-color: var(--gds-sys-color-l2-neutral-01); */
       background-color: var(--_table-row-hover);
     }
   }
@@ -625,24 +622,6 @@ const TableStyles = css`
         }
       }
 
-      /* tbody td .cell-content,
-    thead th .column-header { 
-      animation-name: CELL_ANIMATION_HORIZONTAL, CELL_ANIMATION_HORIZONTAL;
-      animation-fill-mode: both;
-      animation-timing-function: ease-in-out;
-      animation-direction: normal, reverse;
-      animation-timeline: view(inline);
-      animation-range: entry, exit;
-    }
-
-    @keyframes CELL_ANIMATION_HORIZONTAL {
-      0% {
-        opacity: 0.8;
-        filter: blur(12px);
-        translate: 4px 0px;
-      }
-    } */
-
       thead {
         position: sticky;
         top: 4px;
@@ -676,46 +655,46 @@ const TableStyles = css`
       }
 
       /* Horizontal scroll */
-      @property --_inline-start-fade {
+      @property --_start-fade {
         syntax: '<length>';
         inherits: false;
         initial-value: 0;
       }
 
-      @property --_inline-end-fade {
+      @property --_end-fade {
         syntax: '<length>';
         inherits: false;
         initial-value: 0;
       }
 
-      @keyframes table-scroll-inline-fade {
+      @keyframes scroll-fade {
         0% {
-          --_inline-start-fade: 0;
+          --_start-fade: 0;
         }
         10%,
         100% {
-          --_inline-start-fade: var(--gds-sys-space-4xl);
+          --_start-fade: var(--gds-sys-space-4xl);
         }
         0%,
         90% {
-          --_inline-end-fade: var(--gds-sys-space-4xl);
+          --_end-fade: var(--gds-sys-space-4xl);
         }
         100% {
-          --_inline-end-fade: 0;
+          --_end-fade: 0;
         }
       }
 
       .data {
-        overflow-x: scroll;
+        overflow-x: auto;
         mask: linear-gradient(
           to right,
           #0000,
-          #ffff var(--_inline-start-fade) calc(100% - var(--_inline-end-fade)),
+          #ffff var(--_start-fade) calc(100% - var(--_end-fade)),
           #0000
         );
-        animation: table-scroll-inline-fade;
-        animation-timeline: --table-scroll-inline-fade;
-        scroll-timeline: --table-scroll-inline-fade x;
+        animation: scroll-fade;
+        animation-timeline: --scroll-fade;
+        scroll-timeline: --scroll-fade x;
       }
     }
   }
@@ -742,7 +721,7 @@ const TableStyles = css`
 
   /* Scrollbar */
   .data {
-    --_scrollbar-color-thumb: var(--gds-sys-color-l3-neutral-01);
+    --_scrollbar-color-thumb: var(--gds-sys-color-content-neutral-02);
     --_scrollbar-color-track: var(--gds-sys-color-l3-neutral-02);
     --_scrollbar-width: var(--gds-sys-space-2xs);
   }

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

@@ -91,6 +91,30 @@ declare class Textarea extends GdsFormControlElement<string> {
      */
     test_getFieldElement(): Element | null | undefined;
     focus(options?: FocusOptions): void;
+    /**
+     * Selects all the text in the textarea element.
+     */
+    select(): void;
+    /**
+     * Sets the value of the textarea element, replacing a range of text.
+     */
+    setRangeText(...args: Parameters<HTMLTextAreaElement['setRangeText']>): void;
+    /**
+     * Sets the start and end positions of a selection in the textarea element.
+     */
+    setSelectionRange(...args: Parameters<HTMLTextAreaElement['setSelectionRange']>): void;
+    /** The position of the start of the current text selection in the textarea element. */
+    get selectionStart(): number;
+    /** Sets the position of the start of the current text selection in the textarea element. */
+    set selectionStart(value: number);
+    /** The position of the end of the current text selection in the textarea element. */
+    get selectionEnd(): number;
+    /** Sets the position of the end of the current text selection in the textarea element. */
+    set selectionEnd(value: number);
+    /** The direction of the current text selection in the textarea element. */
+    get selectionDirection(): "none" | "backward" | "forward";
+    /** Sets the direction of the current text selection in the textarea element. */
+    set selectionDirection(value: "none" | "backward" | "forward");
     private _handleResize;
     private _handleSlotChange;
     constructor();

package/components/textarea/textarea.component.js

@@ -118,6 +118,58 @@ let Textarea = class extends GdsFormControlElement {
   focus(options) {
     this._getValidityAnchor()?.focus(options);
   }
+  /**
+   * Selects all the text in the textarea element.
+   */
+  select() {
+    this._getValidityAnchor()?.select();
+  }
+  /**
+   * Sets the value of the textarea element, replacing a range of text.
+   */
+  setRangeText(...args) {
+    this._getValidityAnchor()?.setRangeText(...args);
+    this.value = this._getValidityAnchor()?.value || "";
+  }
+  /**
+   * Sets the start and end positions of a selection in the textarea element.
+   */
+  setSelectionRange(...args) {
+    this._getValidityAnchor()?.setSelectionRange(...args);
+  }
+  /** The position of the start of the current text selection in the textarea element. */
+  get selectionStart() {
+    return this._getValidityAnchor()?.selectionStart;
+  }
+  /** Sets the position of the start of the current text selection in the textarea element. */
+  set selectionStart(value) {
+    const anchor = this._getValidityAnchor();
+    if (anchor) {
+      anchor.selectionStart = value;
+    }
+  }
+  /** The position of the end of the current text selection in the textarea element. */
+  get selectionEnd() {
+    return this._getValidityAnchor()?.selectionEnd;
+  }
+  /** Sets the position of the end of the current text selection in the textarea element. */
+  set selectionEnd(value) {
+    const anchor = this._getValidityAnchor();
+    if (anchor) {
+      anchor.selectionEnd = value;
+    }
+  }
+  /** The direction of the current text selection in the textarea element. */
+  get selectionDirection() {
+    return this._getValidityAnchor()?.selectionDirection;
+  }
+  /** Sets the direction of the current text selection in the textarea element. */
+  set selectionDirection(value) {
+    const anchor = this._getValidityAnchor();
+    if (anchor) {
+      anchor.selectionDirection = value;
+    }
+  }
   _handleResize() {
     if (!this.fieldBase) return;
     Promise.resolve().then(() => {