@sebgroup/green-core 1.61.0 → 1.62.1

package/README.md

@@ -65,7 +65,7 @@ In your module:
 
 ```ts
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
-import { NggCoreWrapperModule } from '@sebgroup/green-angular'
+import { NggCoreWrapperModule } from '@sebgroup/green-angular/src/lib/shared'
 
 @NgModule({
     // Add the NggCoreWrapperModule to the `imports` array

package/chunks/{chunk.5L6LO6VX.js → chunk.23CV5ZVX.js}

@@ -1,6 +1,6 @@
 import {
   TransitionalStyles
-} from "./chunk.U44LH2CF.js";
+} from "./chunk.GOUYG42B.js";
 import {
   GdsElement
 } from "./chunk.LQSWYCMZ.js";

package/chunks/{chunk.PBUUPCPL.js → chunk.2HRS24DL.js}

@@ -1,6 +1,6 @@
 import {
   tokens
-} from "./chunk.BYYROY6X.js";
+} from "./chunk.V2ZK6TAZ.js";
 import {
   GdsElement
 } from "./chunk.LQSWYCMZ.js";

package/chunks/{chunk.SGFAP56K.js → chunk.33C4K67P.js}

@@ -1,6 +1,6 @@
 import {
   tokens
-} from "./chunk.BYYROY6X.js";
+} from "./chunk.V2ZK6TAZ.js";
 import {
   GdsElement
 } from "./chunk.LQSWYCMZ.js";

package/chunks/{chunk.IS6GBDKU.js → chunk.5GGONGQJ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.H2KG3F2S.js";
 import {
   tokens
-} from "./chunk.BYYROY6X.js";
+} from "./chunk.V2ZK6TAZ.js";
 import {
   GdsElement
 } from "./chunk.LQSWYCMZ.js";

package/chunks/{chunk.P2BOEVHE.js → chunk.5KE6BA6W.js}

@@ -1,10 +1,10 @@
 import {
   Focusable,
   option_styles_default
-} from "./chunk.43JUKB53.js";
+} from "./chunk.ZRKILGXZ.js";
 import {
   TransitionalStyles
-} from "./chunk.U44LH2CF.js";
+} from "./chunk.GOUYG42B.js";
 import {
   GdsElement
 } from "./chunk.LQSWYCMZ.js";

package/chunks/{chunk.KTCN5HJV.js → chunk.62GGLEJC.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.WM7HBMMV.js";
 import {
   tokens
-} from "./chunk.BYYROY6X.js";
+} from "./chunk.V2ZK6TAZ.js";
 import {
   GdsElement
 } from "./chunk.LQSWYCMZ.js";

package/chunks/{chunk.27SYD4ZG.js → chunk.6XEAE7T2.js}

@@ -1,12 +1,12 @@
 import {
   TransitionalStyles
-} from "./chunk.U44LH2CF.js";
+} from "./chunk.GOUYG42B.js";
 import {
   watch
 } from "./chunk.TYGMNHNO.js";
 import {
   tokens
-} from "./chunk.BYYROY6X.js";
+} from "./chunk.V2ZK6TAZ.js";
 import {
   GdsElement
 } from "./chunk.LQSWYCMZ.js";

package/chunks/{chunk.S4DOMLSN.js → chunk.ADUUHJPG.js}

@@ -1,12 +1,12 @@
 import {
   GdsFlex
-} from "./chunk.WV7BXKV6.js";
+} from "./chunk.YBNYFV2B.js";
 import {
   styleExpressionProperty
 } from "./chunk.H2KG3F2S.js";
 import {
   tokens
-} from "./chunk.BYYROY6X.js";
+} from "./chunk.V2ZK6TAZ.js";
 import {
   gdsCustomElement
 } from "./chunk.MLXMQIEV.js";

package/chunks/{chunk.HJBA7FLT.js → chunk.AMLIYQDY.js}

@@ -1,18 +1,15 @@
 import {
   GdsFormControlElement
-} from "./chunk.Z3MHP5MN.js";
+} from "./chunk.V56VPSWH.js";
 import {
   observeLightDOM
 } from "./chunk.WM7HBMMV.js";
-import {
-  TransitionalStyles
-} from "./chunk.U44LH2CF.js";
 import {
   watch
 } from "./chunk.TYGMNHNO.js";
 import {
   tokens
-} from "./chunk.BYYROY6X.js";
+} from "./chunk.V2ZK6TAZ.js";
 import {
   gdsCustomElement,
   html
@@ -26,9 +23,8 @@ import {
 } from "./chunk.SEHSDSX2.js";
 
 // libs/core/src/components/dropdown/dropdown.ts
-import { msg, str, updateWhenLocaleChanges } from "@lit/localize";
+import { localized, msg, str } from "@lit/localize";
 import { property, query, queryAsync } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { when } from "lit/directives/when.js";
@@ -42,78 +38,36 @@ var style = css`
     :host {
       display: flex;
       flex-direction: column;
-      color: var(--gds-color-l3-content-tertiary);
-      font-family: inherit;
+      width: 100%;
+      gap: var(--gds-space-xs);
+      contain: layout;
+      isolation: isolate;
+      --_transition: all 368ms cubic-bezier(0.4, 0, 0.2, 1);
     }
 
-    button {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: var(--gds-space-m);
-      height: var(--gds-space-3xl);
-      border-style: solid;
-      border-width: var(--gds-space-4xs);
-      border-radius: var(--gds-space-xs);
-      padding-inline: var(--gds-space-m);
+    #field::part(_base) {
       cursor: pointer;
-      box-sizing: border-box;
-      font-size: var(--gds-space-m);
-      font-family: inherit;
-      border-color: var(--gds-color-l3-border-secondary);
-      color: var(--gds-color-l3-content-tertiary);
-      background-color: var(--gds-color-l3-background-secondary);
-      outline-color: transparent;
-      outline-offset: var(--gds-space-3xs);
-      outline-style: solid;
-      outline-width: var(--gds-space-3xs);
-      transition:
-        background-color 0.2s,
-        border-color 0.2s,
-        color 0.2s;
-
-      &:focus {
-        outline-color: color-mix(in srgb, currentcolor, #000 100%);
-
-        &:not(:focus-visible) {
-          outline-color: transparent;
-        }
-      }
-
-      &.small {
-        height: var(--gds-space-xl);
-        padding: var(--gds-space-s);
-        padding-right: var(--gds-space-xs);
-        font-size: calc(var(--gds-space-s) + 2px);
-
-        .icon {
-          width: var(--gds-space-l);
-          height: var(--gds-space-l);
-        }
-      }
+    }
 
-      @media (pointer: fine) {
-        &:hover {
-          background-color: color-mix(
-            in srgb,
-            var(--gds-color-l3-background-secondary),
-            var(--gds-color-l3-states-light-hover)
-          );
-        }
-      }
+    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;
+      flex: 0 1 100%;
 
-      .icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        box-sizing: border-box;
-        height: var(--gds-space-xl);
-        width: var(--gds-space-xl);
-      }
+      /* This prevents overflow when the text is too long */
+      display: grid;
+    }
 
-      &[aria-expanded='true'] ::part(icon) {
-        transform: scaleY(-1);
-      }
+    button:focus {
+      outline: none;
     }
 
     slot[name='trigger'] > span {
@@ -123,14 +77,6 @@ var style = css`
       white-space: nowrap;
     }
 
-    label {
-      font-size: var(--gds-text-size-detail-m);
-      line-height: var(--gds-text-line-height-detail-m);
-      font-weight: var(--gds-text-weight-book);
-      padding-block: var(--gds-space-2xs);
-      font-family: inherit;
-    }
-
     input[type='text'] {
       border-radius: var(--gds-space-xs);
       border-bottom-left-radius: 0;
@@ -161,6 +107,10 @@ var style = css`
         color: var(--gds-color-l3-content-disabled);
       }
     }
+
+    [aria-expanded='true'] [slot='trail'] {
+      transform: scaleY(-1);
+    }
   }
 `;
 var dropdown_styles_default = style;
@@ -169,7 +119,7 @@ var dropdown_styles_default = style;
 var _optionElements, _calcMaxHeight, _handleSearchFieldInput, _handleSearchFieldKeyDown, _handleListboxKeyDown, _handleOptionFocusChange, _handleSelectionChange, handleSelectionChange_fn, _registerAutoCloseListener, registerAutoCloseListener_fn, _unregisterAutoCloseListener, unregisterAutoCloseListener_fn, _blurCloseListener, _tabCloseListener;
 var GdsDropdown = class extends GdsFormControlElement {
   constructor() {
-    super();
+    super(...arguments);
     /**
      * Selects an option in the dropdown.
      *
@@ -178,7 +128,7 @@ var GdsDropdown = class extends GdsFormControlElement {
     __privateAdd(this, _handleSelectionChange);
     __privateAdd(this, _registerAutoCloseListener);
     __privateAdd(this, _unregisterAutoCloseListener);
-    this.label = "";
+    this.supportingText = "";
     this.open = false;
     this.searchable = false;
     this.multiple = false;
@@ -265,7 +215,6 @@ var GdsDropdown = class extends GdsFormControlElement {
         (_a = this._elTriggerBtn) == null ? void 0 : _a.focus();
       }
     });
-    updateWhenLocaleChanges(this);
   }
   get type() {
     return "gds-dropdown";
@@ -311,9 +260,23 @@ var GdsDropdown = class extends GdsFormControlElement {
     }
     return displayValue || ((_b = this.placeholder) == null ? void 0 : _b.innerHTML) || "";
   }
+  /**
+   * Moves focus to this element.
+   */
+  focus() {
+    this._getValidityAnchor().focus();
+  }
+  /**
+   * A reference to the field element. This does not refer to the trigger button element itself,
+   * but the wrapper that makes up the visual field.
+   * Intended for use in integration tests.
+   */
+  test_getFieldElement() {
+    var _a;
+    return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("#field");
+  }
   connectedCallback() {
     super.connectedCallback();
-    TransitionalStyles.instance.apply(this, "gds-dropdown");
     this.updateComplete.then(() => {
       this._handleLightDOMChange();
       this._handleValueChange();
@@ -322,12 +285,26 @@ var GdsDropdown = class extends GdsFormControlElement {
   render() {
     return html`
       ${when(
-      this.label && !this.hideLabel,
-      () => html`<label for="trigger">${this.label}</label>`
+      !this.hideLabel,
+      () => html`
+          <gds-form-control-header>
+            <label id="label" for="trigger" slot="label">${this.label}</label>
+            ${when(
+        this.supportingText.length > 0,
+        () => html`<span slot="supporting-text" id="supporting-text">
+                  ${this.supportingText}
+                </span>`
+      )}
+            <slot
+              id="extended-supporting-text"
+              name="extended-supporting-text"
+              slot="extended-supporting-text"
+            ></slot>
+            <!-- @deprecated: use 'supporting-text' slot instead. Remove in 2.0 release. -->
+            <slot id="sub-label" name="sub-label" slot="supporting-text"></slot>
+          </gds-form-control-header>
+        `
     )}
-
-      <span class="form-info"><slot name="sub-label"></slot></span>
-
       <gds-popover
         .label=${this.label}
         .open=${this.open}
@@ -336,26 +313,35 @@ var GdsDropdown = class extends GdsFormControlElement {
         .disableMobileStyles=${this.disableMobileStyles}
         @gds-ui-state=${(e) => this.open = e.detail.open}
       >
-        <button
-          id="trigger"
-          name="trigger"
-          aria-haspopup="listbox"
+        <gds-field-base
+          .size=${this.size}
+          .disabled=${this.disabled}
+          .invalid=${this.invalid}
           slot="trigger"
-          role="combobox"
-          aria-owns="listbox"
-          aria-controls="listbox"
-          aria-expanded="${this.open}"
-          aria-label="${this.label}"
-          part="trigger"
-          class=${classMap({ small: this.size === "small" })}
+          id="field"
         >
-          <slot name="trigger">
-            <span>${unsafeHTML(this.displayValue)}</span>
-          </slot>
-          <div class="icon">
-            <gds-icon-chevron-bottom></gds-icon-chevron-bottom>
-          </div>
-        </button>
+          <slot name="lead" slot="lead"></slot>
+          <button
+            id="trigger"
+            role="combobox"
+            aria-expanded="${this.open}"
+            aria-owns="listbox"
+            aria-haspopup="listbox"
+            aria-controls="listbox"
+            name="trigger"
+            aria-label="${this.label} ${this.displayValue}"
+            aria-describedby="supporting-text extended-supporting-text sub-label message"
+            aria-invalid="${this.invalid}"
+            aria-required="${this.required}"
+            aria-disabled="${this.disabled}"
+          >
+            <slot name="trigger">
+              <span>${unsafeHTML(this.displayValue)}</span>
+            </slot>
+          </button>
+          <gds-icon-chevron-bottom slot="trail"></gds-icon-chevron-bottom>
+        </gds-field-base>
+
         ${when(
       this.searchable,
       () => html`<input
@@ -379,9 +365,27 @@ var GdsDropdown = class extends GdsFormControlElement {
         </gds-listbox>
       </gds-popover>
 
-      <span class="form-info"
-        ><slot name="message">${this.validationMessage}</slot></span
-      >
+      ${when(
+      !this.hideLabel,
+      () => 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>
+              `
+      )}
+          </gds-form-control-footer>
+        `
+    )}
     `;
   }
   _getValidityAnchor() {
@@ -488,13 +492,9 @@ unregisterAutoCloseListener_fn = function() {
 _blurCloseListener = new WeakMap();
 _tabCloseListener = new WeakMap();
 GdsDropdown.styles = [tokens, dropdown_styles_default];
-GdsDropdown.shadowRootOptions = {
-  mode: "open",
-  delegatesFocus: true
-};
 __decorateClass([
-  property()
-], GdsDropdown.prototype, "label", 2);
+  property({ attribute: "supporting-text" })
+], GdsDropdown.prototype, "supportingText", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], GdsDropdown.prototype, "open", 2);
@@ -549,7 +549,8 @@ __decorateClass([
   watch("open")
 ], GdsDropdown.prototype, "_onOpenChange", 1);
 GdsDropdown = __decorateClass([
-  gdsCustomElement("gds-dropdown")
+  gdsCustomElement("gds-dropdown"),
+  localized()
 ], GdsDropdown);
 
 export {

package/chunks/{chunk.M6S3B5GI.js → chunk.B6XZXYOU.js}

@@ -1,6 +1,6 @@
 import {
   TransitionalStyles
-} from "./chunk.U44LH2CF.js";
+} from "./chunk.GOUYG42B.js";
 import {
   GdsElement
 } from "./chunk.LQSWYCMZ.js";

package/chunks/{chunk.B7X4UWIN.js → chunk.DEX5KV5V.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.H2KG3F2S.js";
 import {
   tokens
-} from "./chunk.BYYROY6X.js";
+} from "./chunk.V2ZK6TAZ.js";
 import {
   GdsElement
 } from "./chunk.LQSWYCMZ.js";

package/chunks/{chunk.KEPXMMGX.js → chunk.EPD6KSQZ.js}

@@ -1,6 +1,6 @@
 import {
   TransitionalStyles
-} from "./chunk.U44LH2CF.js";
+} from "./chunk.GOUYG42B.js";
 import {
   GdsElement
 } from "./chunk.LQSWYCMZ.js";