@sebgroup/green-core 1.38.1 → 1.39.0

package/README.md

@@ -1,5 +1,5 @@
 <div align="center">
-<img width="600" alt="green-core" src="https://github.com/sebgroup/green/assets/11420341/5d4b25fd-0633-498c-b50f-70f07c01ac16">
+<img width="600" alt="green-core" src="https://github.com/seb-oss/green/assets/11420341/5d4b25fd-0633-498c-b50f-70f07c01ac16">
 <h1>@sebgroup/green-core</h1>
 <p>Green Core is a carefully crafted set of Web Components that lays the foundation for the Green Design System.</p>
 </div>

package/chunks/{chunk.PC4VJLMM.js → chunk.F7VQ4QEE.js}

@@ -1,15 +1,15 @@
+import {
+  GdsContainer
+} from "./chunk.P4YC2BEI.js";
 import {
   card_style_css_default
 } from "./chunk.JTFG2VCZ.js";
-import {
-  GdsContainer
-} from "./chunk.Z3RX3OZJ.js";
 import {
   styleExpressionProperty
 } from "./chunk.ADPMTWTS.js";
 import {
   tokens
-} from "./chunk.OYCRDQFS.js";
+} from "./chunk.VGQTBRXA.js";
 import {
   gdsCustomElement,
   html

package/chunks/{chunk.6OJLIA73.js → chunk.FMJZDVMQ.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.ADPMTWTS.js";
 import {
   tokens
-} from "./chunk.OYCRDQFS.js";
+} from "./chunk.VGQTBRXA.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";

package/chunks/{chunk.V22RY2FP.js → chunk.GRJSXR6F.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.KBYQYDL3.js";
 import {
   tokens
-} from "./chunk.OYCRDQFS.js";
+} from "./chunk.VGQTBRXA.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";

package/chunks/chunk.HGTRTF3J.js

@@ -0,0 +1,625 @@
+import {
+  forwardAttributes
+} from "./chunk.YBOK7MI7.js";
+import {
+  GdsFormControlElement
+} from "./chunk.2BMJPIND.js";
+import {
+  constrainSlots
+} from "./chunk.KBYQYDL3.js";
+import {
+  tokens
+} from "./chunk.VGQTBRXA.js";
+import {
+  watch
+} from "./chunk.2WO4NHJ2.js";
+import {
+  gdsCustomElement,
+  html
+} from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __spreadProps,
+  __spreadValues
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/components/input/input.ts
+import { LitElement } from "lit";
+import { property, query, queryAsync } from "lit/decorators.js";
+import { until } from "lit/directives/until.js";
+import { nothing } from "lit/html.js";
+import { when } from "lit/directives/when.js";
+import { choose } from "lit/directives/choose.js";
+import { msg } from "@lit/localize";
+
+// libs/core/src/components/input/input.styles.ts
+import { css } from "lit";
+var styles = css`
+  @layer tokens, a11y, base, simplified;
+
+  @layer tokens {
+    :host {
+      --_color-bg: var(--gds-sys-color-container-container);
+
+      --_color-border: var(--gds-sys-color-stroke-stroke-variant1);
+      --_border-radius: 0.5rem;
+      --_border-width: 0.0625rem;
+      --_border-width-hover: 0.125rem;
+
+      --_color-outline-alpha: 60%;
+      --_color-outline: color-mix(
+        in srgb,
+        var(--_color-border),
+        transparent var(--_color-outline-alpha)
+      );
+
+      --_transition: var(--gds-sys-transition);
+      --_lh: 1.25;
+      --_core-min-block-size: 3.5rem;
+      --_gap: 0.5rem;
+      --_padding-block: 0.625rem;
+      --_padding-inline: 1rem;
+      --_core-icon-size: 1.5rem;
+      --_inner-height: 2rem;
+    }
+  }
+
+  @layer a11y {
+    /* @media (prefers-color-scheme: dark) {
+    :host {
+      --_color-bg: var(--_color-bg-dark);
+    }
+  } */
+
+    @media (prefers-reduced-motion: reduce) {
+      :host {
+        --_transition: none;
+      }
+    }
+
+    @media (prefers-reduced-transparency: reduce) {
+      :host {
+        --_transparency: 1;
+      }
+    }
+
+    /* @media (prefers-contrast: more) {
+    :host {
+      --_color-bg: hsla(60, 4%, 96%, 1);
+      --_color-outline-alpha: 0%;
+    }
+  } */
+  }
+
+  @layer base {
+    * {
+      box-sizing: border-box;
+    }
+
+    :host {
+      contain: layout;
+      display: block;
+      isolation: isolate;
+    }
+
+    .head {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+      padding-inline-end: 1rem;
+    }
+
+    label {
+      font-weight: 400;
+    }
+
+    .foot {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+      padding-inline-end: 1rem;
+
+      gds-badge {
+        align-self: flex-end;
+      }
+
+      :first-child {
+        flex-grow: 1;
+      }
+    }
+
+    .supporting-text,
+    .error-text {
+      font-size: 0.875rem;
+    }
+
+    slot[name='extended-supporting-text'] {
+      background-color: #eee;
+      border: 1px solid #ccc;
+      border-radius: 0.5rem;
+      display: block;
+      font-size: 0.875rem;
+      margin-top: 0.5rem;
+      opacity: 0;
+      padding: 1rem;
+      transition: var(--_transition);
+
+      [aria-hidden='false'] & {
+        opacity: 1;
+      }
+    }
+
+    div.extended-supporting-text {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: var(--_transition);
+
+      > * {
+        overflow: hidden;
+      }
+
+      &[aria-hidden='false'] {
+        grid-template-rows: 1fr;
+        opacity: 1;
+      }
+    }
+
+    input[type='number']::-webkit-inner-spin-button {
+      display: none;
+    }
+
+    input,
+    textarea {
+      appearance: none;
+      background-color: transparent;
+      border: 0;
+      box-sizing: border-box;
+      font-family: inherit;
+      font-size: var(--_fs);
+      line-height: var(--_lh);
+      margin: unset;
+      min-height: var(--_inner-height);
+      outline: none;
+      overflow: hidden;
+      padding: unset;
+      transition: var(--_transition);
+      width: 100%;
+
+      &:focus:not(:focus-visible) {
+        outline: none;
+      }
+
+      &::-webkit-inner-spin-button,
+      &::-webkit-calendar-picker-indicator {
+        appearance: none;
+        background-color: rgb(195, 0, 255);
+        background-image: none;
+        height: 100%;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 40px;
+      }
+    }
+
+    textarea {
+      max-height: max(var(--_inner-height), calc(1lh * var(--_lines)));
+      min-height: max(var(--_inner-height), calc(1lh * var(--_lines)));
+      overflow: hidden;
+      resize: none;
+      transition: unset;
+    }
+
+    .field {
+      align-items: flex-start;
+      background-color: var(--_color-bg);
+      block-size: max-content;
+      border: var(--_border-width) solid var(--_color-border);
+      border-radius: var(--_border-radius);
+      cursor: text;
+      display: flex;
+      flex-direction: row;
+      gap: var(--_gap);
+      justify-content: center;
+      margin-block: var(--_gap);
+      min-block-size: var(--_core-min-block-size);
+      outline-color: transparent;
+      outline-offset: var(--_border-width);
+      outline-style: solid;
+      outline-width: var(--_border-width-hover);
+      padding-block: var(--_padding-block);
+      padding-inline: var(--_padding-inline);
+      position: relative;
+      transition: var(--_transition);
+
+      &:focus:not(:focus-visible) {
+        outline: none;
+      }
+
+      &:hover {
+        --_color-bg: var(--gds-sys-color-container-container-dim2);
+      }
+
+      &:has(input:focus, textarea:focus) {
+        /* --_border-width: var(--_border-width-hover); */
+        border: var(--_border-width) solid var(--_color-border);
+        border-radius: var(--_border-radius);
+        box-shadow: none;
+        outline-color: var(--_color-outline);
+        transition: var(--_transition);
+      }
+
+      slot {
+        align-items: center;
+        display: flex;
+        height: var(--_inner-height);
+      }
+    }
+
+    :host(:invalid) .field {
+      --_color-bg: var(--gds-sys-color-status-negative-negative-bright);
+      --_color-border: var(--gds-sys-color-stroke-stroke-negative);
+      --_color-outline: var(--gds-sys-color-stroke-stroke-negative);
+      color: var(--gds-sys-color-status-negative-on-negative-bright);
+    }
+
+    :host(:invalid) .error-text {
+      color: var(--gds-sys-color-status-negative-on-negative-bright);
+    }
+
+    :host(:invalid) label {
+      color: var(--gds-sys-color-status-negative-on-negative-bright);
+    }
+  }
+
+  @layer simplified {
+    :host([variant='simplified']) label {
+      align-items: center;
+      background-color: transparent;
+      display: block;
+      height: max-content;
+      inset: 0;
+      width: 100%;
+
+      div {
+        line-height: var(--_lh);
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        transition: var(--_transition);
+      }
+    }
+
+    :host([variant='simplified'])
+      label:has(
+        input:not(:placeholder-shown, [readonly]),
+        textarea:not(:placeholder-shown, [readonly])
+      ),
+    :host([variant='simplified']) label:focus-within {
+      div {
+        font-size: 0.75rem;
+        font-weight: 500;
+        top: 0.375rem;
+        transform: translateY(
+          translateY(calc(0px - var(--gds-input-label-translate)))
+        );
+      }
+
+      input,
+      textarea {
+        margin-top: 0.75rem;
+      }
+    }
+  }
+`;
+
+// libs/core/src/components/input/input.ts
+var _renderDefault, renderDefault_fn, _renderSimplified, renderSimplified_fn, _forwardableAttrs, _handleOnInput, _handleOnChange, _handleFieldClick, _handleClearBtnClick, _handleSupportingTextBtnClick, _renderNativeInput, renderNativeInput_fn, _renderNativeTextarea, renderNativeTextarea_fn, _renderSupportingText, renderSupportingText_fn, _renderExtendedSupportingText, renderExtendedSupportingText_fn, _renderClearButton, renderClearButton_fn, _shouldShowRemainingChars, shouldShowRemainingChars_get, _renderRemainingCharsBadge, renderRemainingCharsBadge_fn, _asyncRenderExtendedSupportingTextButton, asyncRenderExtendedSupportingTextButton_fn;
+var GdsInput = class extends GdsFormControlElement {
+  constructor() {
+    super();
+    // variant="default"
+    __privateAdd(this, _renderDefault);
+    // variant="simplified"
+    __privateAdd(this, _renderSimplified);
+    __privateAdd(this, _renderNativeInput);
+    __privateAdd(this, _renderNativeTextarea);
+    __privateAdd(this, _renderSupportingText);
+    __privateAdd(this, _renderExtendedSupportingText);
+    __privateAdd(this, _renderClearButton);
+    __privateAdd(this, _shouldShowRemainingChars);
+    __privateAdd(this, _renderRemainingCharsBadge);
+    /**
+     * Returns a promise that resolves when the DOM query for the extended supporting text slot has resolved.
+     * If the slot is empty, an empty template is returned, otherwise the support text toggle button is returned.
+     */
+    __privateAdd(this, _asyncRenderExtendedSupportingTextButton);
+    this.value = "";
+    this.label = "";
+    this.supportingText = "";
+    this.showExtendedSupportingText = false;
+    this.clearable = false;
+    this.maxlength = Number.MAX_SAFE_INTEGER;
+    this.variant = "default";
+    this.multiline = false;
+    // 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;
+    });
+    __privateAdd(this, _handleOnChange, (e) => {
+      const element = e.target;
+      this.value = element.value;
+      this.dispatchEvent(
+        new Event("change", {
+          bubbles: true,
+          composed: true
+        })
+      );
+    });
+    __privateAdd(this, _handleFieldClick, () => {
+      this.elInputAsync.then((el) => el.focus());
+    });
+    __privateAdd(this, _handleClearBtnClick, () => {
+      this.value = "";
+    });
+    __privateAdd(this, _handleSupportingTextBtnClick, () => {
+      this.showExtendedSupportingText = !this.showExtendedSupportingText;
+      this.dispatchEvent(
+        new CustomEvent("gds-ui-state", {
+          bubbles: true,
+          composed: true,
+          detail: this.showExtendedSupportingText
+        })
+      );
+    });
+    constrainSlots(this);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._setAutoHeight();
+  }
+  render() {
+    return html`${choose(this.variant, [
+      ["default", () => __privateMethod(this, _renderDefault, renderDefault_fn).call(this)],
+      ["simplified", () => __privateMethod(this, _renderSimplified, renderSimplified_fn).call(this)]
+    ])}`;
+  }
+  _getValidityAnchor() {
+    return this.elInput;
+  }
+  _setAutoHeight() {
+    if (!this.multiline)
+      return;
+    this.elInputAsync.then((element) => {
+      const lines = (element.value.split("\n").length || 1).toString();
+      element == null ? void 0 : element.style.setProperty("--_lines", lines.toString());
+    });
+  }
+};
+_renderDefault = new WeakSet();
+renderDefault_fn = function() {
+  return html`
+      <div class="head">
+        <label for="input">${this.label}</label>
+        ${until(__privateMethod(this, _asyncRenderExtendedSupportingTextButton, asyncRenderExtendedSupportingTextButton_fn).call(this), nothing)}
+      </div>
+
+      ${__privateMethod(this, _renderSupportingText, renderSupportingText_fn).call(this)} ${__privateMethod(this, _renderExtendedSupportingText, renderExtendedSupportingText_fn).call(this)}
+
+      <div class="field" @click=${__privateGet(this, _handleFieldClick)}>
+        <slot name="lead"></slot>
+        ${when(
+    this.multiline,
+    () => html`${__privateMethod(this, _renderNativeTextarea, renderNativeTextarea_fn).call(this)}`,
+    () => html`${__privateMethod(this, _renderNativeInput, renderNativeInput_fn).call(this)}`
+  )}
+        <slot name="trail" gds-allow="gds-badge"></slot>
+        ${__privateMethod(this, _renderClearButton, renderClearButton_fn).call(this)}
+      </div>
+
+      <div class="foot">
+        <div>
+          ${when(
+    this.invalid,
+    () => html`<span class="error-text">${this.validationMessage}</span>`
+  )}
+        </div>
+        ${when(
+    __privateGet(this, _shouldShowRemainingChars, shouldShowRemainingChars_get),
+    () => __privateMethod(this, _renderRemainingCharsBadge, renderRemainingCharsBadge_fn).call(this)
+  )}
+      </div>
+    `;
+};
+_renderSimplified = new WeakSet();
+renderSimplified_fn = function() {
+  return html`
+      <div class="field" @click=${__privateGet(this, _handleFieldClick)}>
+        <slot name="lead"></slot>
+        <label for="input">
+          <div>${this.label}</div>
+          ${when(
+    this.multiline,
+    () => html`${__privateMethod(this, _renderNativeTextarea, renderNativeTextarea_fn).call(this)}`,
+    () => html`${__privateMethod(this, _renderNativeInput, renderNativeInput_fn).call(this)}`
+  )}
+        </label>
+        <slot name="trail" gds-allow="gds-badge"></slot>
+        ${__privateMethod(this, _renderClearButton, renderClearButton_fn).call(this)}
+      </div>
+
+      <div class="foot">
+        ${__privateMethod(this, _renderSupportingText, renderSupportingText_fn).call(this)}
+        ${when(
+    __privateGet(this, _shouldShowRemainingChars, shouldShowRemainingChars_get),
+    () => __privateMethod(this, _renderRemainingCharsBadge, renderRemainingCharsBadge_fn).call(this)
+  )}
+        ${until(__privateMethod(this, _asyncRenderExtendedSupportingTextButton, asyncRenderExtendedSupportingTextButton_fn).call(this), nothing)}
+      </div>
+
+      ${__privateMethod(this, _renderExtendedSupportingText, renderExtendedSupportingText_fn).call(this)}
+    `;
+};
+_forwardableAttrs = new WeakMap();
+_handleOnInput = new WeakMap();
+_handleOnChange = new WeakMap();
+_handleFieldClick = new WeakMap();
+_handleClearBtnClick = new WeakMap();
+_handleSupportingTextBtnClick = new WeakMap();
+_renderNativeInput = new WeakSet();
+renderNativeInput_fn = function() {
+  return html`
+      <input
+        @input=${__privateGet(this, _handleOnInput)}
+        @change=${__privateGet(this, _handleOnChange)}
+        .value=${this.value}
+        id="input"
+        aria-describedby="supporting-text"
+        placeholder=" "
+        ${forwardAttributes(__privateGet(this, _forwardableAttrs))}
+      />
+    `;
+};
+_renderNativeTextarea = new WeakSet();
+renderNativeTextarea_fn = function() {
+  return html`
+      <textarea
+        @input=${__privateGet(this, _handleOnInput)}
+        @change=${__privateGet(this, _handleOnChange)}
+        .value=${this.value}
+        id="input"
+        aria-describedby="supporting-text"
+        placeholder=" "
+        ${forwardAttributes(__privateGet(this, _forwardableAttrs))}
+      ></textarea>
+    `;
+};
+_renderSupportingText = new WeakSet();
+renderSupportingText_fn = function() {
+  return html`
+      <div class="supporting-text" id="supporting-text">
+        ${this.supportingText}
+      </div>
+    `;
+};
+_renderExtendedSupportingText = new WeakSet();
+renderExtendedSupportingText_fn = function() {
+  return html`
+      <div
+        class="extended-supporting-text"
+        aria-hidden="${!this.showExtendedSupportingText}"
+        ?inert="${!this.showExtendedSupportingText}"
+      >
+        <div>
+          <slot name="message" @slotchange=${() => this.requestUpdate()}></slot>
+        </div>
+      </div>
+    `;
+};
+_renderClearButton = new WeakSet();
+renderClearButton_fn = function() {
+  if (this.clearable && this.value.length > 0)
+    return html`
+        <gds-button
+          size="small"
+          variant="tertiary"
+          label="${msg("Clear input")}"
+          @click=${__privateGet(this, _handleClearBtnClick)}
+        >
+          <gds-icon-cross-small />
+        </gds-button>
+      `;
+  else
+    return nothing;
+};
+_shouldShowRemainingChars = new WeakSet();
+shouldShowRemainingChars_get = function() {
+  return this.maxlength < Number.MAX_SAFE_INTEGER;
+};
+_renderRemainingCharsBadge = new WeakSet();
+renderRemainingCharsBadge_fn = function() {
+  const remaining = this.maxlength - this.value.length;
+  let variant;
+  if (remaining < 0) {
+    variant = "error";
+  } else if (remaining < 20) {
+    variant = "warning";
+  } else {
+    variant = "success";
+  }
+  return html`<gds-badge variant="${variant}">${remaining}</gds-badge>`;
+};
+_asyncRenderExtendedSupportingTextButton = new WeakSet();
+asyncRenderExtendedSupportingTextButton_fn = async function() {
+  return this.elExtendedSupportingTextSlot.then((slot) => {
+    if (slot.assignedElements().length > 0)
+      return html`
+          <gds-button
+            size="small"
+            variant="tertiary"
+            label="${msg("Show extended supporting text")}"
+            @click=${__privateGet(this, _handleSupportingTextBtnClick)}
+          >
+            <gds-icon-circle-info />
+          </gds-button>
+        `;
+    else
+      return nothing;
+  });
+};
+GdsInput.shadowRootOptions = __spreadProps(__spreadValues({}, LitElement.shadowRootOptions), {
+  delegatesFocus: true
+});
+GdsInput.styles = [tokens, styles];
+__decorateClass([
+  property()
+], GdsInput.prototype, "value", 2);
+__decorateClass([
+  property()
+], GdsInput.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "supporting-text" })
+], GdsInput.prototype, "supportingText", 2);
+__decorateClass([
+  property({
+    attribute: "show-extended-supporting-text",
+    type: Boolean,
+    reflect: true
+  })
+], GdsInput.prototype, "showExtendedSupportingText", 2);
+__decorateClass([
+  property({ type: Boolean })
+], GdsInput.prototype, "clearable", 2);
+__decorateClass([
+  property({ type: Number })
+], GdsInput.prototype, "maxlength", 2);
+__decorateClass([
+  property({ type: String })
+], GdsInput.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Boolean })
+], GdsInput.prototype, "multiline", 2);
+__decorateClass([
+  queryAsync("input, textarea")
+], GdsInput.prototype, "elInputAsync", 2);
+__decorateClass([
+  query("input, textarea")
+], GdsInput.prototype, "elInput", 2);
+__decorateClass([
+  queryAsync('slot[name="extended-supporting-text"]')
+], GdsInput.prototype, "elExtendedSupportingTextSlot", 2);
+__decorateClass([
+  watch("value")
+], GdsInput.prototype, "_setAutoHeight", 1);
+GdsInput = __decorateClass([
+  gdsCustomElement("gds-input")
+], GdsInput);
+
+export {
+  GdsInput
+};

package/chunks/{chunk.D35VWG7Z.js → chunk.HXSX2352.js}

@@ -1,6 +1,6 @@
 import {
   GdsSegment
-} from "./chunk.AP23QGB4.js";
+} from "./chunk.TUCS4UFR.js";
 import {
   resizeObserver
 } from "./chunk.VHN4JEZC.js";
@@ -9,7 +9,7 @@ import {
 } from "./chunk.S7DYDS4E.js";
 import {
   tokens
-} from "./chunk.OYCRDQFS.js";
+} from "./chunk.VGQTBRXA.js";
 import {
   watch
 } from "./chunk.2WO4NHJ2.js";

package/chunks/{chunk.ZEGPRNBY.js → chunk.JLTCEWS2.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.S7DYDS4E.js";
 import {
   tokens
-} from "./chunk.OYCRDQFS.js";
+} from "./chunk.VGQTBRXA.js";
 import {
   watch
 } from "./chunk.2WO4NHJ2.js";

package/chunks/{chunk.NMP7SICY.js → chunk.KALODFIV.js}

@@ -1,6 +1,6 @@
 import {
   tokens
-} from "./chunk.OYCRDQFS.js";
+} from "./chunk.VGQTBRXA.js";
 import {
   gdsCustomElement
 } from "./chunk.VOYMQ322.js";