@sebgroup/green-core 1.72.0 → 1.74.0

package/components/blur/blur.component.d.ts

@@ -0,0 +1,18 @@
+import { GdsElement } from '../../gds-element';
+/**
+ * @element gds-blur
+ * A container that applies a blur effect to its content.
+ *
+ * @slot - Content to be blurred.
+ *
+ * @example
+ * <gds-blur>
+ *   <div>Sensitive content here</div>
+ * </gds-blur>
+ *
+ * @status beta
+ */
+export declare class GdsBlur extends GdsElement {
+    static styles: import("lit").CSSResult;
+    render(): any;
+}

package/components/blur/blur.component.js

@@ -0,0 +1,18 @@
+import {
+  __decorateClass
+} from "../../chunks/chunk.QTSIPXV3.js";
+import { GdsElement } from "../../gds-element.js";
+import { gdsCustomElement, html } from "../../scoping.js";
+import styles from "./blur.styles.js";
+let GdsBlur = class extends GdsElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+GdsBlur.styles = styles;
+GdsBlur = __decorateClass([
+  gdsCustomElement("gds-blur")
+], GdsBlur);
+export {
+  GdsBlur
+};

package/components/blur/blur.d.ts

@@ -0,0 +1,2 @@
+import { GdsBlur } from './blur.component';
+export { GdsBlur };

package/components/blur/blur.js

@@ -0,0 +1,6 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+import { GdsBlur } from "./blur.component.js";
+GdsBlur.define();
+export {
+  GdsBlur
+};

package/components/blur/blur.styles.d.ts

@@ -0,0 +1,2 @@
+declare const style: import("lit").CSSResult;
+export default style;

package/components/blur/blur.styles.js

@@ -0,0 +1,12 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+import { css } from "lit";
+const style = css`
+  :host {
+    --_blur: 5px;
+    filter: blur(var(--_blur));
+  }
+`;
+var blur_styles_default = style;
+export {
+  blur_styles_default as default
+};

package/components/blur/index.d.ts

@@ -0,0 +1 @@
+export * from './blur';

package/components/blur/index.js

@@ -0,0 +1 @@
+export * from "./blur.js";

package/components/datepicker/datepicker.component.d.ts

@@ -29,6 +29,12 @@ declare class Datepicker extends GdsFormControlElement<Date> {
      * Whether to use the small variant of the datepicker field.
      */
     size: 'large' | 'small';
+    /**
+     * Hides the header and the footer, while still keeping the accessible label
+     *
+     * Always set the `label` attribute, and if you need to hide it, add this attribute and keep `label` set.
+     */
+    plain: boolean;
     /**
      * Whether to show a column of week numbers in the calendar.
      */
@@ -96,10 +102,9 @@ declare const GdsDatepicker_base: (new (...args: any[]) => import("../../utils/m
  *
  * @status beta
  *
- * @slot supporting-text - A supporting text that will be displayed below the label and above the input field.
  * @slot extended-supporting-text - A longer supporting text can be placed here. It will be displayed in a panel when the user clicks the info button.
  * @slot message - ***(deprecated - use `errorMessage` property instead)*** Error message to show below the input field whem there is a validation error.
- * @slot sub-label - ***(deprecated - use `supporting-text` slot instead)*** Renders between the label and the trigger button.
+ * @slot sub-label - ***(deprecated - use `supporting-text` property instead)*** Renders between the label and the trigger button.
  *
  * @event change - Fired when the value of the dropdown is changed through user interaction (not when value prop is set programatically).
  * @event gds-ui-state - Fired when the dropdown is opened or closed.

package/components/datepicker/datepicker.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.QTSIPXV3.js";
-var _valueOnOpen, _renderBackToValidRangeButton, renderBackToValidRangeButton_fn, _focusDate, focusDate_fn, _getSpinnerLabel, getSpinnerLabel_fn, _getMinSpinnerValue, getMinSpinnerValue_fn, _getMaxSpinnerValue, getMaxSpinnerValue_fn, _dispatchChangeEvent, dispatchChangeEvent_fn, _dispatchInputEvent, dispatchInputEvent_fn, _handleFieldFocusOut, _handleSpinnerFocus, _handleClipboardCopy, _handleClipboardPaste, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleCalendarFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, _parseDateFormat, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, _years, years_get, _isValueOutsideRange, isValueOutsideRange_get;
+var _valueOnOpen, _shouldShowFooter, shouldShowFooter_fn, _renderBackToValidRangeButton, renderBackToValidRangeButton_fn, _focusDate, focusDate_fn, _getSpinnerLabel, getSpinnerLabel_fn, _getMinSpinnerValue, getMinSpinnerValue_fn, _getMaxSpinnerValue, getMaxSpinnerValue_fn, _dispatchChangeEvent, dispatchChangeEvent_fn, _dispatchInputEvent, dispatchInputEvent_fn, _handleFieldFocusOut, _handleSpinnerFocus, _handleClipboardCopy, _handleClipboardPaste, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleCalendarFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, _parseDateFormat, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, _years, years_get, _isValueOutsideRange, isValueOutsideRange_get;
 import { localized, msg } from "@lit/localize";
 import { nothing } from "lit";
 import { property, query, queryAll, queryAsync, state } from "lit/decorators.js";
@@ -19,6 +19,7 @@ import { GdsButton } from "../../components/button/button.component.js";
 import { GdsDropdown } from "../../components/dropdown/dropdown.component.js";
 import { GdsFlex } from "../../components/flex/flex.component.js";
 import { gdsCustomElement, html } from "../../scoping.js";
+import formControlHostStyle from "../../shared-styles/form-control-host.style.js";
 import { tokens } from "../../tokens.style.js";
 import { TransitionalStyles } from "../../transitional-styles.js";
 import { watch } from "../../utils/decorators/index.js";
@@ -43,6 +44,7 @@ import { styles } from "./datepicker.styles.js";
 let Datepicker = class extends GdsFormControlElement {
   constructor() {
     super();
+    __privateAdd(this, _shouldShowFooter);
     __privateAdd(this, _renderBackToValidRangeButton);
     __privateAdd(this, _focusDate);
     __privateAdd(this, _getSpinnerLabel);
@@ -64,6 +66,7 @@ let Datepicker = class extends GdsFormControlElement {
     this.open = false;
     this.supportingText = "";
     this.size = "large";
+    this.plain = false;
     this.showWeekNumbers = false;
     this.hideLabel = false;
     this.disabledWeekends = false;
@@ -273,26 +276,29 @@ let Datepicker = class extends GdsFormControlElement {
   }
   render() {
     return html`
-      <gds-form-control-header class="size-${this.size}">
-        <label id="label" for="spinner-0" slot="label">${this.label}</label>
-        ${when(
-      this.supportingText.length > 0,
-      () => html`<span slot="supporting-text" id="supporting-text">
-              ${this.supportingText}
-            </span>`
+      ${when(
+      !this.plain,
+      () => html`<gds-form-control-header class="size-${this.size}">
+            <label id="label" for="spinner-0" slot="label">${this.label}</label>
+            ${when(
+        this.supportingText.length > 0,
+        () => html`<span slot="supporting-text" id="supporting-text">
+                  ${this.supportingText}
+                </span>`
+      )}
+            <slot
+              id="supporting-text-slot"
+              name="extended-supporting-text"
+              slot="extended-supporting-text"
+            ></slot>
+            <!-- @deprecated: use 'supporting-text' slot instead. Remove in 2.0 release. -->
+            <slot
+              id="sub-label-slot"
+              name="sub-label"
+              slot="supporting-text"
+            ></slot>
+          </gds-form-control-header>`
     )}
-        <slot
-          id="supporting-text-slot"
-          name="extended-supporting-text"
-          slot="extended-supporting-text"
-        ></slot>
-        <!-- @deprecated: use 'supporting-text' slot instead. Remove in 2.0 release. -->
-        <slot
-          id="sub-label-slot"
-          name="sub-label"
-          slot="supporting-text"
-        ></slot>
-      </gds-form-control-header>
       <gds-field-base
         .size=${this.size}
         .disabled=${this.disabled}
@@ -315,7 +321,7 @@ let Datepicker = class extends GdsFormControlElement {
                   aria-valuemin=${__privateMethod(this, _getMinSpinnerValue, getMinSpinnerValue_fn).call(this, f.name)}
                   aria-valuemax=${__privateMethod(this, _getMaxSpinnerValue, getMaxSpinnerValue_fn).call(this, f.name)}
                   aria-label=${__privateMethod(this, _getSpinnerLabel, getSpinnerLabel_fn).call(this, f.name)}
-                  aria-describedby="label supporting-text supporting-text-slot sub-label-slot message"
+                  aria-describedby="supporting-text supporting-text-slot sub-label-slot message"
                   data-max-width=${__privateMethod(this, _getMaxSpinnerValue, getMaxSpinnerValue_fn).call(this, f.name).toString().length}
                   @keydown=${__privateGet(this, _handleSpinnerKeydown)}
                   @change=${(e) => __privateGet(this, _handleSpinnerChange).call(this, e.detail.value, f.name)}
@@ -355,22 +361,18 @@ let Datepicker = class extends GdsFormControlElement {
         </gds-button>
       </gds-field-base>
 
-      <gds-form-control-footer class="size-${this.size}">
-        ${when(
-      this.invalid,
-      // @deprecated
-      // Wrapped in a slot for backwards compatibility with the deprecated message slot
-      // Remove for 2.0 release
-      () => html`
+      ${when(
+      __privateMethod(this, _shouldShowFooter, shouldShowFooter_fn).call(this),
+      () => html`<gds-form-control-footer class="size-${this.size}">
+            ${``}
             <slot id="message" name="message" slot="message">
               <gds-icon-triangle-exclamation
                 solid
               ></gds-icon-triangle-exclamation>
               ${this.errorMessage || this.validationMessage}
             </slot>
-          `
+          </gds-form-control-footer>`
     )}
-      </gds-form-control-footer>
 
       <gds-popover
         autofocus
@@ -529,6 +531,10 @@ let Datepicker = class extends GdsFormControlElement {
   }
 };
 _valueOnOpen = new WeakMap();
+_shouldShowFooter = new WeakSet();
+shouldShowFooter_fn = function() {
+  return !this.plain && this.invalid;
+};
 _renderBackToValidRangeButton = new WeakSet();
 renderBackToValidRangeButton_fn = async function() {
   const focusedDate = await this.getFocusedDate();
@@ -567,7 +573,7 @@ getSpinnerLabel_fn = function(name) {
     month: msg("Month"),
     day: msg("Day")
   };
-  return labels[name];
+  return `${labels[name]} ${this.label}`;
 };
 _getMinSpinnerValue = new WeakSet();
 getMinSpinnerValue_fn = function(name) {
@@ -655,7 +661,7 @@ isValueOutsideRange_get = function() {
     return false;
   return this.value.getFullYear() < this.min.getFullYear() || this.value.getFullYear() > this.max.getFullYear();
 };
-Datepicker.styles = [tokens, styles];
+Datepicker.styles = [tokens, formControlHostStyle, styles];
 __decorateClass([
   property({ converter: dateConverter })
 ], Datepicker.prototype, "value", 1);
@@ -674,6 +680,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], Datepicker.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean })
+], Datepicker.prototype, "plain", 2);
 __decorateClass([
   property({ type: Boolean, attribute: "show-week-numbers" })
 ], Datepicker.prototype, "showWeekNumbers", 2);

package/components/datepicker/datepicker.styles.js

@@ -4,17 +4,6 @@ const styles = css`
   @layer base, reset;
 
   @layer base {
-    :host {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      contain: layout;
-      isolation: isolate;
-      gap: var(--gds-space-xs);
-      font-family: inherit;
-      min-width: 200px;
-    }
-
     ::part(_button) {
       outline-offset: -1px;
     }
@@ -29,6 +18,11 @@ const styles = css`
       font-weight: var(--gds-text-weight-regular);
     }
 
+    :host([size='small']) .spinners {
+      font-size: var(--gds-text-size-detail-s);
+      line-height: var(--gds-text-line-height-detail-s);
+    }
+
     .spinner {
       display: flex;
       align-items: center;

package/components/details/details.component.d.ts

@@ -39,7 +39,6 @@ export declare class GdsDetails extends GdsDetails_base {
     private _content?;
     private _openIconSlot?;
     private _closedIconSlot?;
-    protected firstUpdated(): void;
     private __handleOpenChange;
     render(): any;
 }

package/components/details/details.component.js

@@ -3,7 +3,7 @@ import {
   __privateAdd,
   __privateGet
 } from "../../chunks/chunk.QTSIPXV3.js";
-var _initializeContentHeight, _updateContentHeight, _handleToggle, _handleKeydown, _syncGroupState, _dispatchStateEvent, _renderHeader, _renderIconButton, _renderContent;
+var _handleToggle, _handleKeydown, _syncGroupState, _dispatchStateEvent, _renderHeader, _renderIconButton, _renderContent;
 import { property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { GdsElement } from "../../gds-element.js";
@@ -30,21 +30,6 @@ let GdsDetails = class extends withSizeXProps(
     this.name = "";
     this.open = false;
     this.size = "large";
-    __privateAdd(this, _initializeContentHeight, () => {
-      if (!this._content)
-        return;
-      __privateGet(this, _updateContentHeight).call(this);
-    });
-    __privateAdd(this, _updateContentHeight, () => {
-      if (!this._content)
-        return;
-      requestAnimationFrame(() => {
-        this._content?.style.setProperty(
-          "--_max-height",
-          this.open ? `${this._content.scrollHeight}px` : "0"
-        );
-      });
-    });
     __privateAdd(this, _handleToggle, () => {
       this.open = !this.open;
       __privateGet(this, _dispatchStateEvent).call(this);
@@ -59,12 +44,11 @@ let GdsDetails = class extends withSizeXProps(
       if (!this.open || !this.name)
         return;
       document.querySelectorAll('[gds-element="gds-details"]').forEach((details) => {
-        var _a, _b;
+        var _a;
         if (details !== this && details.name === this.name) {
           const other = details;
           other.open = false;
-          __privateGet(_a = other, _updateContentHeight).call(_a);
-          __privateGet(_b = other, _dispatchStateEvent).call(_b);
+          __privateGet(_a = other, _dispatchStateEvent).call(_a);
         }
       });
     });
@@ -114,7 +98,11 @@ let GdsDetails = class extends withSizeXProps(
       return html`
       <div
         id="content-${this.name || "default"}"
-        class="content"
+        class=${classMap({
+        content: true,
+        open: this.open,
+        small: this.size === "small"
+      })}
         aria-hidden="${!this.open}"
       >
         <slot></slot>
@@ -122,11 +110,7 @@ let GdsDetails = class extends withSizeXProps(
     `;
     });
   }
-  firstUpdated() {
-    __privateGet(this, _initializeContentHeight).call(this);
-  }
   __handleOpenChange() {
-    __privateGet(this, _updateContentHeight).call(this);
     __privateGet(this, _syncGroupState).call(this);
   }
   render() {
@@ -143,8 +127,6 @@ let GdsDetails = class extends withSizeXProps(
     `;
   }
 };
-_initializeContentHeight = new WeakMap();
-_updateContentHeight = new WeakMap();
 _handleToggle = new WeakMap();
 _handleKeydown = new WeakMap();
 _syncGroupState = new WeakMap();

package/components/details/details.styles.js

@@ -91,7 +91,6 @@ const styles = css`
     }
 
     .details.open .content {
-      display: flex;
       padding-block-end: var(--gds-space-l);
     }
 
@@ -100,11 +99,19 @@ const styles = css`
     }
 
     .content {
-      max-height: var(--_max-height, 0);
-      overflow: hidden;
-      transition: all 240ms cubic-bezier(0.4, 0, 0.2, 1);
+      interpolate-size: allow-keywords;
+      height: 0;
+      transition:
+        height 0.35s ease,
+        padding-block-end 0.35s ease;
+      overflow-y: clip;
       outline: none;
     }
+
+    .content.open {
+      height: max-content;
+      max-height: 100vh;
+    }
   }
 `;
 export {

package/components/dropdown/dropdown.component.d.ts

@@ -9,10 +9,9 @@ export * from '../../primitives/listbox/option.component';
  *
  * @slot - Options for the dropdown. Accepts `gds-option` and `gds-menu-heading` elements.
  * @slot trigger - Custom content for the trigger button can be assigned through this slot.
- * @slot supporting-text - A supporting text that will be displayed below the label and above the input field.
  * @slot extended-supporting-text - A longer supporting text can be placed here. It will be displayed in a panel when the user clicks the info button.
  * @slot message - ***(deprecated - use `errorMessage` property instead)*** Error message to show below the input field whem there is a validation error.
- * @slot sub-label - ***(deprecated - use `supporting-text` slot instead)*** Renders between the label and the trigger button.
+ * @slot sub-label - ***(deprecated - use `supporting-text` property instead)*** Renders between the label and the trigger button.
  *
  * @event change - Fired when the value of the dropdown is changed through user interaction (not when value prop is set programatically).
  * @event input - Fired when the value of the dropdown is changed through user interaction.
@@ -94,8 +93,16 @@ export declare class GdsDropdown<ValueT = any> extends GdsFormControlElement<Val
     size: 'medium' | 'small';
     /**
      * Whether to hide the label.
+     *
+     * @deprecated - use `plain` instead
      */
     hideLabel: boolean;
+    /**
+     * Hides the header and the footer, while still keeping the accessible label
+     *
+     * Always set the `label` attribute, and if you need to hide it, add this attribute and keep `label` set.
+     */
+    plain: boolean;
     /**
      * Whether to disable the mobile styles.
      */

package/components/dropdown/dropdown.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.QTSIPXV3.js";
-var _optionElements, _renderCombobox, _renderTriggerButton, _calcMaxHeight, _dispatchUISateEvent, _handlePopoverStateChange, _handleSearchFieldInput, _handleSearchFieldKeyDown, _handleListboxKeyDown, _handleOptionFocusChange, _handleSelectionChange, handleSelectionChange_fn, _dispatchInputEvent, _dispatchChangeEvent, _registerAutoCloseListener, registerAutoCloseListener_fn, _unregisterAutoCloseListener, unregisterAutoCloseListener_fn, _blurCloseListener, _tabCloseListener;
+var _optionElements, _shouldShowFooter, shouldShowFooter_fn, _renderCombobox, _renderTriggerButton, _calcMaxHeight, _dispatchUISateEvent, _handlePopoverStateChange, _handleSearchFieldInput, _handleSearchFieldKeyDown, _handleListboxKeyDown, _handleOptionFocusChange, _handleSelectionChange, handleSelectionChange_fn, _dispatchInputEvent, _dispatchChangeEvent, _registerAutoCloseListener, registerAutoCloseListener_fn, _unregisterAutoCloseListener, unregisterAutoCloseListener_fn, _blurCloseListener, _tabCloseListener;
 import { localized, msg, str } from "@lit/localize";
 import { property, query, queryAsync } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -17,6 +17,7 @@ import { GdsFormControlFooter } from "../../primitives/form-control-footer/form-
 import { GdsFormControlHeader } from "../../primitives/form-control-header/form-control-header.component.js";
 import { GdsListbox } from "../../primitives/listbox/listbox.component.js";
 import { gdsCustomElement, html } from "../../scoping.js";
+import formControlHostStyle from "../../shared-styles/form-control-host.style.js";
 import { tokens } from "../../tokens.style.js";
 import { observeLightDOM } from "../../utils/decorators/observe-light-dom.js";
 import { watch } from "../../utils/decorators/watch.js";
@@ -29,6 +30,7 @@ export * from "../../primitives/listbox/option.component.js";
 let GdsDropdown = class extends GdsFormControlElement {
   constructor() {
     super(...arguments);
+    __privateAdd(this, _shouldShowFooter);
     /**
      * Selects an option in the dropdown.
      *
@@ -48,6 +50,7 @@ let GdsDropdown = class extends GdsFormControlElement {
     this.maxHeight = 500;
     this.size = "medium";
     this.hideLabel = false;
+    this.plain = false;
     this.disableMobileStyles = false;
     __privateAdd(this, _optionElements, void 0);
     __privateAdd(this, _renderCombobox, () => {
@@ -55,6 +58,7 @@ let GdsDropdown = class extends GdsFormControlElement {
       <input
         id="trigger"
         role="combobox"
+        class="native-control"
         aria-expanded="${this.open}"
         aria-owns="listbox"
         aria-haspopup="listbox"
@@ -94,6 +98,7 @@ let GdsDropdown = class extends GdsFormControlElement {
       <button
         id="trigger"
         role="combobox"
+        class="native-control"
         aria-expanded="${this.open}"
         aria-owns="listbox"
         aria-haspopup="listbox"
@@ -291,7 +296,7 @@ let GdsDropdown = class extends GdsFormControlElement {
   render() {
     return html`
       ${when(
-      !this.hideLabel,
+      !this.plain && !this.hideLabel,
       () => html`
           <gds-form-control-header class="size-${this.size}">
             <label id="label" for="trigger" slot="label">${this.label}</label>
@@ -361,23 +366,16 @@ let GdsDropdown = class extends GdsFormControlElement {
       </gds-popover>
 
       ${when(
-      !this.hideLabel,
+      __privateMethod(this, _shouldShowFooter, shouldShowFooter_fn).call(this),
       () => html`
           <gds-form-control-footer class="size-${this.size}">
-            ${when(
-        this.invalid,
-        // @deprecated
-        // Wrapped in a slot for backwards compatibility with the deprecated message slot
-        // Remove for 2.0 release
-        () => html`
-                <slot id="message" name="message" slot="message">
-                  <gds-icon-triangle-exclamation
-                    solid
-                  ></gds-icon-triangle-exclamation>
-                  ${this.errorMessage || this.validationMessage}
-                </slot>
-              `
-      )}
+            ${``}
+            <slot id="message" name="message" slot="message">
+              <gds-icon-triangle-exclamation
+                solid
+              ></gds-icon-triangle-exclamation>
+              ${this.errorMessage || this.validationMessage}
+            </slot>
           </gds-form-control-footer>
         `
     )}
@@ -434,6 +432,10 @@ let GdsDropdown = class extends GdsFormControlElement {
   }
 };
 _optionElements = new WeakMap();
+_shouldShowFooter = new WeakSet();
+shouldShowFooter_fn = function() {
+  return !this.plain && this.invalid;
+};
 _renderCombobox = new WeakMap();
 _renderTriggerButton = new WeakMap();
 _calcMaxHeight = new WeakMap();
@@ -475,7 +477,7 @@ unregisterAutoCloseListener_fn = function() {
 };
 _blurCloseListener = new WeakMap();
 _tabCloseListener = new WeakMap();
-GdsDropdown.styles = [tokens, styles];
+GdsDropdown.styles = [tokens, formControlHostStyle, styles];
 __decorateClass([
   property({ attribute: "supporting-text" })
 ], GdsDropdown.prototype, "supportingText", 2);
@@ -510,7 +512,10 @@ __decorateClass([
   property({ type: Boolean, attribute: "hide-label" })
 ], GdsDropdown.prototype, "hideLabel", 2);
 __decorateClass([
-  property()
+  property({ type: Boolean })
+], GdsDropdown.prototype, "plain", 2);
+__decorateClass([
+  property({ type: Boolean })
 ], GdsDropdown.prototype, "disableMobileStyles", 2);
 __decorateClass([
   query("#trigger")

package/components/dropdown/dropdown.styles.js

@@ -5,35 +5,23 @@ const style = css`
 
   @layer base {
     :host {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-      gap: var(--gds-space-xs);
-      --_transition: all 368ms cubic-bezier(0.4, 0, 0.2, 1);
+      isolation: auto;
+      contain: none;
     }
 
     #field::part(_base) {
       cursor: pointer;
     }
 
-    button {
-      appearance: none;
-      background: transparent;
-      border-width: 0;
-      font-family: inherit;
-      font-size: inherit;
-      line-height: inherit;
-      color: currentColor;
-      cursor: pointer;
-      padding: 0;
-      text-align: left;
+    button#trigger {
       flex: 0 1 100%;
+      cursor: pointer;
 
       /* This prevents overflow when the text is too long */
       display: grid;
     }
 
-    button:focus {
+    #trigger:focus {
       outline: none;
     }
 
@@ -75,14 +63,6 @@ const style = css`
       }
     }
 
-    input[role='combobox'] {
-      appearance: none;
-      background: transparent;
-      border: none;
-      font-size: inherit;
-      outline: none;
-    }
-
     [aria-expanded='true'] [slot='trail'] {
       transform: scaleY(-1);
     }

package/components/formatted-text/account/account-formatter.d.ts

@@ -0,0 +1,4 @@
+export type AccountFormats = keyof typeof accountsFormats;
+export declare const accountsFormats: {
+    'seb-account': (value: string | number | undefined) => string;
+};

package/components/formatted-text/account/account-formatter.js

@@ -0,0 +1,13 @@
+import "../../../chunks/chunk.QTSIPXV3.js";
+const accountsFormats = {
+  "seb-account": (value) => {
+    const account = typeof value === "string" ? value.replace(" ", "") : value?.toString() ?? "";
+    if (account.length !== 11) {
+      return account;
+    }
+    return `${account.slice(0, 4)} ${account.slice(4, 6)} ${account.slice(6, 9)} ${account.slice(9, 11)}`;
+  }
+};
+export {
+  accountsFormats
+};

package/components/formatted-text/account/formatted-account.component.d.ts

@@ -0,0 +1,28 @@
+import { PropertyValues } from 'lit';
+import { GdsFormattedText } from '../formatted-text';
+import { AccountFormats } from './account-formatter';
+/**
+ * @element gds-formatted-account
+ * @status beta
+ *
+ * `gds-formatted-account` extends `gds-text` and formats the account to the desired format.
+ *
+ * @example
+ * <gds-formatted-account
+ *   account="54400023423">
+ * </gds-formatted-account>
+ */
+export declare class GdsFormattedAccount extends GdsFormattedText {
+    /**
+     * The account number or identifier to display.
+     * For format 'seb-account', it needs to be 11 characters.
+     * */
+    account?: number | string;
+    /**
+     * Specifies the account format.
+     * @default 'seb-account'
+     */
+    protected format: AccountFormats;
+    get formattedValue(): string;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+}