@sebgroup/green-core 1.90.2 → 2.0.0

package/chunks/chunk.QU3DSPNU.js

@@ -0,0 +1,26 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+
+export {
+  __decorateClass,
+  __privateGet,
+  __privateAdd,
+  __privateSet,
+  __privateMethod
+};

package/components/alert/alert.component.js

@@ -4,8 +4,8 @@ import {
   __privateGet,
   __privateMethod,
   __privateSet
-} from "../../chunks/chunk.QTSIPXV3.js";
-var _timeoutId, _progressIntervalId, _alertRef, _observer, _isVisible, _remaining, _lastTick, _timerController, _setupObserver, setupObserver_fn, _disconnectObserver, disconnectObserver_fn, _startTicking, startTicking_fn, _resumeTimer, resumeTimer_fn, _pauseTimer, pauseTimer_fn, _clearTimers, clearTimers_fn, _dismiss, dismiss_fn, _handleButtonClick, handleButtonClick_fn, _handleKeyDown, handleKeyDown_fn, _config, config_get, _renderIcon, renderIcon_fn, _renderMessage, renderMessage_fn, _renderActionButton, renderActionButton_fn, _renderCloseButton, renderCloseButton_fn, _renderTimerBar, renderTimerBar_fn;
+} from "../../chunks/chunk.QU3DSPNU.js";
+var _timeoutId, _progressIntervalId, _alertRef, _observer, _isVisible, _remaining, _lastTick, _timerController, _GdsAlert_instances, setupObserver_fn, disconnectObserver_fn, startTicking_fn, resumeTimer_fn, pauseTimer_fn, clearTimers_fn, dismiss_fn, handleButtonClick_fn, handleKeyDown_fn, config_get, renderIcon_fn, renderMessage_fn, renderActionButton_fn, renderCloseButton_fn, renderProgressBar_fn;
 import { localized, msg } from "@lit/localize";
 import { nothing } from "lit";
 import { property, state } from "lit/decorators.js";
@@ -21,11 +21,11 @@ import { IconCircleCheck } from "../icon/icons/circle-check.component.js";
 import { IconCircleInfo } from "../icon/icons/circle-info.component.js";
 import { IconCrossSmall } from "../icon/icons/cross-small.component.js";
 import { IconTriangleExclamation } from "../icon/icons/triangle-exclamation.component.js";
-import { alertStyles } from "./alert.style.js";
+import AlertStyles from "./alert.styles.js";
 const VARIANT_CONFIG = {
   positive: { icon: "circle-check", card: "positive" },
   warning: {
-    icon: "triangle-exclamation",
+    icon: "circle-info",
     card: "warning"
   },
   negative: {
@@ -43,25 +43,7 @@ const PROGRESS_INTERVAL = 100;
 let GdsAlert = class extends GdsElement {
   constructor() {
     super();
-    __privateAdd(this, _setupObserver);
-    __privateAdd(this, _disconnectObserver);
-    // Timer management (pausable)
-    __privateAdd(this, _startTicking);
-    __privateAdd(this, _resumeTimer);
-    __privateAdd(this, _pauseTimer);
-    __privateAdd(this, _clearTimers);
-    __privateAdd(this, _dismiss);
-    // Event handlers
-    __privateAdd(this, _handleButtonClick);
-    __privateAdd(this, _handleKeyDown);
-    // Helpers
-    __privateAdd(this, _config);
-    // Render methods
-    __privateAdd(this, _renderIcon);
-    __privateAdd(this, _renderMessage);
-    __privateAdd(this, _renderActionButton);
-    __privateAdd(this, _renderCloseButton);
-    __privateAdd(this, _renderTimerBar);
+    __privateAdd(this, _GdsAlert_instances);
     this.variant = "information";
     this.label = "";
     this.role = "alert";
@@ -71,57 +53,59 @@ let GdsAlert = class extends GdsElement {
     this._progress = 100;
     this._isClosing = false;
     this._cardHidden = false;
-    __privateAdd(this, _timeoutId, void 0);
-    __privateAdd(this, _progressIntervalId, void 0);
+    __privateAdd(this, _timeoutId);
+    __privateAdd(this, _progressIntervalId);
     __privateAdd(this, _alertRef, createRef());
-    __privateAdd(this, _observer, void 0);
+    __privateAdd(this, _observer);
     __privateAdd(this, _isVisible, false);
     __privateAdd(this, _remaining, 0);
     __privateAdd(this, _lastTick, 0);
     __privateAdd(this, _timerController, {
       hostConnected: () => {
         if (this.timeout > 0) {
-          __privateMethod(this, _setupObserver, setupObserver_fn).call(this);
+          __privateMethod(this, _GdsAlert_instances, setupObserver_fn).call(this);
         }
       },
       hostDisconnected: () => {
-        __privateMethod(this, _disconnectObserver, disconnectObserver_fn).call(this);
-        __privateMethod(this, _clearTimers, clearTimers_fn).call(this);
+        __privateMethod(this, _GdsAlert_instances, disconnectObserver_fn).call(this);
+        __privateMethod(this, _GdsAlert_instances, clearTimers_fn).call(this);
       }
     });
     this.addController(__privateGet(this, _timerController));
   }
   updated(changed) {
     if (changed.has("timeout")) {
-      __privateMethod(this, _disconnectObserver, disconnectObserver_fn).call(this);
-      __privateMethod(this, _clearTimers, clearTimers_fn).call(this);
+      __privateMethod(this, _GdsAlert_instances, disconnectObserver_fn).call(this);
+      __privateMethod(this, _GdsAlert_instances, clearTimers_fn).call(this);
       __privateSet(this, _remaining, Math.max(0, this.timeout));
       this._progress = 100;
-      if (this.timeout > 0)
-        __privateMethod(this, _setupObserver, setupObserver_fn).call(this);
+      if (this.timeout > 0) __privateMethod(this, _GdsAlert_instances, setupObserver_fn).call(this);
     }
   }
   render() {
-    if (this._cardHidden)
-      return nothing;
+    if (this._cardHidden) return nothing;
     const classes = {
       dismissing: this._isClosing,
-      dismissible: this.dismissible
+      dismissible: this.dismissible,
+      "has-action": this.buttonLabel,
+      timeout: this.timeout > 0
     };
     return html`
       <gds-card
         ${ref(__privateGet(this, _alertRef))}
         role=${this.role}
         aria-label=${this.label}
-        variant=${__privateGet(this, _config, config_get).card}
+        variant=${__privateGet(this, _GdsAlert_instances, config_get).card}
         class=${classMap(classes)}
-        @keydown=${__privateMethod(this, _handleKeyDown, handleKeyDown_fn)}
+        @keydown=${__privateMethod(this, _GdsAlert_instances, handleKeyDown_fn)}
         id="alert-message"
         padding="m"
       >
-        ${__privateMethod(this, _renderIcon, renderIcon_fn).call(this)} ${__privateMethod(this, _renderMessage, renderMessage_fn).call(this)}
-        ${this.buttonLabel ? __privateMethod(this, _renderActionButton, renderActionButton_fn).call(this, this.buttonLabel) : nothing}
-        ${__privateMethod(this, _renderCloseButton, renderCloseButton_fn).call(this)} ${__privateMethod(this, _renderTimerBar, renderTimerBar_fn).call(this)}
+        <div class="wrapper">
+          ${__privateMethod(this, _GdsAlert_instances, renderIcon_fn).call(this)} ${__privateMethod(this, _GdsAlert_instances, renderMessage_fn).call(this)}
+        </div>
+        ${!this.timeout && this.buttonLabel ? __privateMethod(this, _GdsAlert_instances, renderActionButton_fn).call(this, this.buttonLabel) : nothing}
+        ${__privateMethod(this, _GdsAlert_instances, renderCloseButton_fn).call(this)} ${__privateMethod(this, _GdsAlert_instances, renderProgressBar_fn).call(this)}
       </gds-card>
     `;
   }
@@ -134,12 +118,10 @@ _isVisible = new WeakMap();
 _remaining = new WeakMap();
 _lastTick = new WeakMap();
 _timerController = new WeakMap();
-_setupObserver = new WeakSet();
+_GdsAlert_instances = new WeakSet();
 setupObserver_fn = function() {
-  if (__privateGet(this, _observer))
-    return;
-  if (!__privateGet(this, _remaining))
-    __privateSet(this, _remaining, Math.max(0, this.timeout));
+  if (__privateGet(this, _observer)) return;
+  if (!__privateGet(this, _remaining)) __privateSet(this, _remaining, Math.max(0, this.timeout));
   __privateSet(this, _observer, new IntersectionObserver(
     (entries) => {
       const entry = entries[0];
@@ -147,10 +129,10 @@ setupObserver_fn = function() {
       const nowVisible = ratio >= 0.1;
       if (nowVisible && !__privateGet(this, _isVisible)) {
         __privateSet(this, _isVisible, true);
-        __privateMethod(this, _resumeTimer, resumeTimer_fn).call(this);
+        __privateMethod(this, _GdsAlert_instances, resumeTimer_fn).call(this);
       } else if (!nowVisible && __privateGet(this, _isVisible)) {
         __privateSet(this, _isVisible, false);
-        __privateMethod(this, _pauseTimer, pauseTimer_fn).call(this);
+        __privateMethod(this, _GdsAlert_instances, pauseTimer_fn).call(this);
       }
     },
     {
@@ -160,7 +142,6 @@ setupObserver_fn = function() {
   ));
   __privateGet(this, _observer).observe(this);
 };
-_disconnectObserver = new WeakSet();
 disconnectObserver_fn = function() {
   if (__privateGet(this, _observer)) {
     __privateGet(this, _observer).disconnect();
@@ -168,7 +149,7 @@ disconnectObserver_fn = function() {
   }
   __privateSet(this, _isVisible, false);
 };
-_startTicking = new WeakSet();
+// Timer management (pausable)
 startTicking_fn = function() {
   __privateSet(this, _lastTick, Date.now());
   __privateSet(this, _progressIntervalId, window.setInterval(() => {
@@ -178,31 +159,27 @@ startTicking_fn = function() {
     __privateSet(this, _remaining, Math.max(0, __privateGet(this, _remaining) - dt));
     this._progress = this.timeout > 0 ? Math.max(0, __privateGet(this, _remaining) / this.timeout * 100) : 0;
     if (__privateGet(this, _remaining) <= 0) {
-      __privateMethod(this, _dismiss, dismiss_fn).call(this, "timeout");
+      __privateMethod(this, _GdsAlert_instances, dismiss_fn).call(this, "timeout");
     }
   }, PROGRESS_INTERVAL));
 };
-_resumeTimer = new WeakSet();
 resumeTimer_fn = function() {
   if (__privateGet(this, _remaining) <= 0 || __privateGet(this, _timeoutId) || __privateGet(this, _progressIntervalId))
     return;
-  __privateMethod(this, _startTicking, startTicking_fn).call(this);
+  __privateMethod(this, _GdsAlert_instances, startTicking_fn).call(this);
 };
-_pauseTimer = new WeakSet();
 pauseTimer_fn = function() {
-  __privateMethod(this, _clearTimers, clearTimers_fn).call(this);
+  __privateMethod(this, _GdsAlert_instances, clearTimers_fn).call(this);
 };
-_clearTimers = new WeakSet();
 clearTimers_fn = function() {
   clearTimeout(__privateGet(this, _timeoutId));
   clearInterval(__privateGet(this, _progressIntervalId));
   __privateSet(this, _timeoutId, __privateSet(this, _progressIntervalId, void 0));
 };
-_dismiss = new WeakSet();
 dismiss_fn = async function(source) {
   this._isClosing = true;
-  __privateMethod(this, _disconnectObserver, disconnectObserver_fn).call(this);
-  __privateMethod(this, _clearTimers, clearTimers_fn).call(this);
+  __privateMethod(this, _GdsAlert_instances, disconnectObserver_fn).call(this);
+  __privateMethod(this, _GdsAlert_instances, clearTimers_fn).call(this);
   await this.updateComplete;
   this.dispatchCustomEvent("gds-close", {
     detail: { source },
@@ -212,7 +189,7 @@ dismiss_fn = async function(source) {
   await new Promise((r) => setTimeout(r, FADE_DURATION));
   this._cardHidden = true;
 };
-_handleButtonClick = new WeakSet();
+// Event handlers
 handleButtonClick_fn = function(e) {
   this.dispatchCustomEvent("gds-action", {
     detail: { source: "button", event: e },
@@ -220,23 +197,20 @@ handleButtonClick_fn = function(e) {
     composed: true
   });
 };
-_handleKeyDown = new WeakSet();
 handleKeyDown_fn = function(e) {
   if (e.key === "Escape" && this.dismissible) {
     e.preventDefault();
-    __privateMethod(this, _dismiss, dismiss_fn).call(this, "escape");
+    __privateMethod(this, _GdsAlert_instances, dismiss_fn).call(this, "escape");
   }
 };
-_config = new WeakSet();
 config_get = function() {
   return VARIANT_CONFIG[this.variant];
 };
-_renderIcon = new WeakSet();
+// Render methods
 renderIcon_fn = function() {
-  const icon = `gds-icon-${__privateGet(this, _config, config_get).icon}`;
+  const icon = `gds-icon-${__privateGet(this, _GdsAlert_instances, config_get).icon}`;
   return html`${staticHtml`<${unsafeStatic(getScopedTagName(icon))} class="icon" solid aria-hidden="true" size="24px"></${unsafeStatic(getScopedTagName(icon))}>`}`;
 };
-_renderMessage = new WeakSet();
 renderMessage_fn = function() {
   return html`<div class="message">
       <span class="message-text">
@@ -244,41 +218,40 @@ renderMessage_fn = function() {
       </span>
     </div>`;
 };
-_renderActionButton = new WeakSet();
 renderActionButton_fn = function(label) {
   return html`
       <gds-button
-        class="action-button"
-        variant="neutral"
-        rank="primary"
-        size="small"
-        @click=${__privateMethod(this, _handleButtonClick, handleButtonClick_fn)}
+        class="action"
+        .variant=${this.variant}
+        rank="secondary"
+        @click=${__privateMethod(this, _GdsAlert_instances, handleButtonClick_fn)}
         aria-describedby="alert-message"
       >
         ${label.trim()}
       </gds-button>
     `;
 };
-_renderCloseButton = new WeakSet();
 renderCloseButton_fn = function() {
   return this.dismissible ? html`
           <gds-button
-            class="close-btn"
-            variant="neutral"
-            rank="tertiary"
+            class="close"
+            .variant=${this.variant}
+            rank="secondary"
             size="small"
             aria-label=${msg("Dismiss alert")}
-            @click=${() => __privateMethod(this, _dismiss, dismiss_fn).call(this, "close")}
+            @click=${() => __privateMethod(this, _GdsAlert_instances, dismiss_fn).call(this, "close")}
           >
             <gds-icon-cross-small size="20px"></gds-icon-cross-small>
           </gds-button>
         ` : nothing;
 };
-_renderTimerBar = new WeakSet();
-renderTimerBar_fn = function() {
+renderProgressBar_fn = function() {
   return this.timeout > 0 ? html`
           <div
-            class="timer-bar"
+            class=${classMap({
+    "progress-container": true,
+    [this.variant]: true
+  })}
             role="timer"
             aria-label=${msg("Auto-dismiss timer")}
             aria-valuenow=${this._progress}
@@ -289,7 +262,7 @@ renderTimerBar_fn = function() {
           </div>
         ` : nothing;
 };
-GdsAlert.styles = [tokens, alertStyles];
+GdsAlert.styles = [tokens, AlertStyles];
 __decorateClass([
   property({ type: String, reflect: true })
 ], GdsAlert.prototype, "variant", 2);

package/components/alert/alert.js

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.QTSIPXV3.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { GdsAlert } from "./alert.component.js";
 GdsAlert.define();
 export {

package/components/alert/alert.styles.js

@@ -0,0 +1,216 @@
+import "../../chunks/chunk.QU3DSPNU.js";
+import { css } from "lit";
+const style = css`
+  :host {
+    box-sizing: border-box;
+    display: block;
+    max-width: 100%;
+    container-type: inline-size;
+  }
+
+  #alert-message {
+    --grid-areas: 'wrapper cta close';
+
+    &.timeout {
+      --grid-areas: 'wrapper cta close' 'progress-bar progress-bar progress-bar';
+    }
+
+    display: grid;
+    grid-template-columns: 1fr auto auto;
+    grid-template-areas: var(--grid-areas);
+    min-width: fit-content;
+    position: relative;
+    transition:
+      opacity 0.3s ease-out,
+      transform 0.3s ease-out;
+    gap: 0;
+  }
+
+  /* Animation */
+  @media (prefers-reduced-motion: no-preference) {
+    #alert-message {
+      animation: slideIn 0.3s ease-out;
+    }
+  }
+
+  #alert-message.dismissing {
+    opacity: 0;
+    transform: translateY(-1rem);
+    pointer-events: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    #alert-message.dismissing {
+      transform: none;
+    }
+  }
+
+  @keyframes slideIn {
+    from {
+      opacity: 0;
+      transform: translateY(-0.5rem);
+    }
+  }
+
+  /* Focus styles */
+  #alert-message:focus {
+    outline: 2px solid var(--gds-focus-color, #000);
+    outline-offset: 2px;
+  }
+
+  .wrapper {
+    grid-area: wrapper;
+    display: flex;
+    gap: var(--gds-sys-space-s);
+
+    .message {
+      max-width: 80ch;
+    }
+  }
+
+  .dismissible .wrapper {
+    margin-top: var(--gds-sys-space-2xs);
+  }
+
+  .has-action {
+    padding: var(--gds-sys-space-s) var(--gds-sys-space-m);
+  }
+
+  .has-action .wrapper {
+    margin-top: var(--gds-sys-space-xs);
+  }
+
+  .has-action.dismissible .close {
+    margin-top: var(--gds-sys-space-2xs);
+  }
+
+  .message {
+    font: var(--gds-sys-text-body-regular-m);
+    display: flex;
+    justify-content: flex-start;
+    text-align: left;
+    margin-inline-end: auto;
+  }
+
+  .message-text {
+    display: inline;
+    white-space: normal;
+    padding-inline-end: var(--gds-sys-space-xs);
+  }
+
+  .message-text ::slotted(strong) {
+    font-weight: var(--gds-sys-text-weight-book, 450);
+  }
+
+  .progress-container {
+    --_fill-color: var(--gds-sys-color-border-strong);
+    --_container-color: var(--gds-sys-color-l3-information-03);
+
+    &.notice {
+      --_fill-color: var(--gds-sys-color-content-notice-01);
+      --_container-color: var(--gds-sys-color-l3-notice-03);
+    }
+
+    &.warning {
+      --_fill-color: var(--gds-sys-color-content-warning-01);
+      --_container-color: var(--gds-sys-color-l3-warning-03);
+    }
+
+    &.positive {
+      --_fill-color: var(--gds-sys-color-content-positive-01);
+      --_container-color: var(--gds-sys-color-l3-positive-03);
+    }
+
+    &.negative {
+      --_fill-color: var(--gds-sys-color-content-negative-01);
+      --_container-color: var(--gds-sys-color-l3-negative-03);
+    }
+
+    grid-area: progress-bar;
+    margin-top: var(--gds-sys-space-m);
+    inset: auto var(--gds-sys-space-m) var(--gds-sys-space-m);
+    height: 0.25rem;
+    background: var(--_container-color);
+    border-radius: var(--gds-sys-radius-max);
+    overflow: hidden;
+  }
+
+  .timer-progress {
+    height: 100%;
+    transition: width 0.1s linear;
+    background: var(--_fill-color);
+    will-change: width;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .timer-progress {
+      transition: none;
+    }
+  }
+
+  @container (max-width: 600px) {
+    #alert-message {
+      --grid-areas: 'wrapper close' 'cta cta';
+
+      &.timeout {
+        --grid-areas: 'wrapper close' 'progress-bar progress-bar';
+      }
+
+      .action {
+        grid-area: cta;
+        margin-top: var(--gds-sys-space-xs);
+      }
+    }
+  }
+
+  /* Medium: inline */
+  @container (min-width: 601px) and (max-width: 1024px) {
+    #alert-message {
+      .close {
+        margin-left: var(--gds-sys-space-xs);
+      }
+    }
+  }
+
+  /* Large: centered */
+  @container (min-width: 1025px) {
+    #alert-message {
+      grid-template-columns: auto auto min-content;
+
+      &.dismissible:not(.has-action) {
+        grid-template-columns: 1fr auto;
+      }
+
+      &.dismissible:not(.has-action) .wrapper {
+        margin-inline-start: 0;
+      }
+
+      .close {
+        margin-left: var(--gds-sys-space-xs);
+      }
+
+      .icon {
+        margin-inline-start: auto;
+      }
+
+      .wrapper {
+        margin-left: auto;
+      }
+
+      .action {
+        margin-right: auto;
+      }
+    }
+  }
+
+  /* High contrast mode support */
+  @media (prefers-contrast: high) {
+    .icon {
+      forced-color-adjust: none;
+    }
+  }
+`;
+var alert_styles_default = style;
+export {
+  alert_styles_default as default
+};

package/components/badge/badge.component.d.ts

@@ -15,7 +15,7 @@ export declare class GdsBadge extends GdsBadge_base {
      * Supports all valid variants like information, notice, positive, warning, negative.
      * @property variant
      */
-    variant: string;
+    variant: 'information' | 'notice' | 'positive' | 'warning' | 'negative' | 'disabled';
     /**
      * Defines the size of the badge.
      * The default value is `default`.
@@ -23,13 +23,6 @@ export declare class GdsBadge extends GdsBadge_base {
      * @property {string} size - The size of the badge, which can be either 'default' or 'small'.
      */
     size: 'default' | 'small';
-    /**
-     * Indicates whether the badge is disabled.
-     * When set to `true`, the badge will appear in a disabled state and will not be interactive.
-     *
-     * @property {boolean} disabled - Controls the disabled state of the badge.
-     */
-    disabled: boolean;
     /**
      * Indicates whether the badge is in notification mode.
      * When set to `true`, the badge will act as a notification badge with only two variants: `positive` or `negative`.