@sebgroup/green-core 1.84.0 → 1.85.0

package/components/alert/alert.component.d.ts

@@ -0,0 +1,60 @@
+import { PropertyValues } from 'lit';
+import { GdsElement } from '../../gds-element';
+/**
+ * @element gds-alert
+ *
+ * Alert component with responsive layout, optional icon, dismiss functionality,
+ * auto-dismiss timer, and action button support.
+ * @status beta
+ *
+ * @slot - Alert message content
+ * @fires gds-close - Fired when alert is dismissed
+ * @fires gds-action - Fired when action button is clicked
+ */
+export declare class GdsAlert extends GdsElement {
+    #private;
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * The variant of the alert, which determines its appearance and icon.
+     */
+    variant: 'information' | 'notice' | 'positive' | 'warning' | 'negative';
+    /**
+     * The label for the alert, used for accessibility purposes.
+     * This needs be set to something relevant to the content of the alert.
+     */
+    label: string;
+    /**
+     * The role of the alert, which can be 'alert' or 'status'.
+     * 'alert' is used for critical messages that require immediate attention,
+     * while 'status' is for informational messages. These corresponds to the
+     * ARIA roles, which you can read more about on MDN:
+     * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/alert_role
+     * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role
+     */
+    role: 'alert' | 'status';
+    /**
+     * The dismissibility of the alert, which determines whether it can be closed by the user.
+     */
+    dismissible: boolean;
+    /**
+     * The time in milliseconds after which the alert will automatically dismiss itself.
+     * Set to 0 to disable auto-dismiss.
+     */
+    timeout: number;
+    /**
+     * The text for the action button, if provided.
+     * If not set, no action button will be rendered.
+     */
+    buttonLabel: string;
+    private _progress;
+    private _isClosing;
+    private _cardHidden;
+    constructor();
+    protected updated(changed: PropertyValues): void;
+    render(): any;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'gds-alert': GdsAlert;
+    }
+}

package/components/alert/alert.component.js

@@ -0,0 +1,273 @@
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "../../chunks/chunk.QTSIPXV3.js";
+var _timeoutId, _progressIntervalId, _alertRef, _timerController, _startTimer, startTimer_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;
+import { localized, msg } from "@lit/localize";
+import { nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { html as staticHtml, unsafeStatic } from "lit/static-html.js";
+import { GdsElement } from "../../gds-element.js";
+import { gdsCustomElement, html } from "../../scoping.js";
+import { tokens } from "../../tokens.style.js";
+import { GdsButton } from "../button/button.component.js";
+import { GdsCard } from "../card/card.component.js";
+import { IconCircleCheck } from "../icon/icons/circle-check.component.js";
+import { IconCircleInfo } from "../icon/icons/circle-info.js";
+import { IconCrossSmall } from "../icon/icons/cross-small.js";
+import { IconTriangleExclamation } from "../icon/icons/triangle-exclamation.js";
+import { alertStyles } from "./alert.style.js";
+const VARIANT_CONFIG = {
+  positive: { icon: "circle-check", card: "positive" },
+  warning: {
+    icon: "triangle-exclamation",
+    card: "warning"
+  },
+  negative: {
+    icon: "triangle-exclamation",
+    card: "negative"
+  },
+  information: {
+    icon: "circle-info",
+    card: "information"
+  },
+  notice: { icon: "circle-info", card: "notice" }
+};
+const FADE_DURATION = 300;
+const PROGRESS_INTERVAL = 100;
+let GdsAlert = class extends GdsElement {
+  constructor() {
+    super();
+    // Timer management
+    __privateAdd(this, _startTimer);
+    __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);
+    this.variant = "information";
+    this.label = "";
+    this.role = "alert";
+    this.dismissible = false;
+    this.timeout = 0;
+    this.buttonLabel = "";
+    this._progress = 100;
+    this._isClosing = false;
+    this._cardHidden = false;
+    __privateAdd(this, _timeoutId, void 0);
+    __privateAdd(this, _progressIntervalId, void 0);
+    __privateAdd(this, _alertRef, createRef());
+    __privateAdd(this, _timerController, {
+      hostConnected: () => {
+        if (this.timeout > 0)
+          __privateMethod(this, _startTimer, startTimer_fn).call(this);
+      },
+      hostDisconnected: () => __privateMethod(this, _clearTimers, clearTimers_fn).call(this)
+    });
+    this.addController(__privateGet(this, _timerController));
+  }
+  updated(changed) {
+    if (changed.has("timeout")) {
+      __privateMethod(this, _clearTimers, clearTimers_fn).call(this);
+      if (this.timeout > 0)
+        __privateMethod(this, _startTimer, startTimer_fn).call(this);
+    }
+  }
+  render() {
+    if (this._cardHidden)
+      return nothing;
+    const classes = {
+      dismissing: this._isClosing,
+      dismissible: this.dismissible
+    };
+    return html`
+      <gds-card
+        ${ref(__privateGet(this, _alertRef))}
+        role=${this.role}
+        aria-label=${this.label}
+        variant=${__privateGet(this, _config, config_get).card}
+        class=${classMap(classes)}
+        @keydown=${__privateMethod(this, _handleKeyDown, 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)}
+      </gds-card>
+    `;
+  }
+};
+_timeoutId = new WeakMap();
+_progressIntervalId = new WeakMap();
+_alertRef = new WeakMap();
+_timerController = new WeakMap();
+_startTimer = new WeakSet();
+startTimer_fn = function() {
+  const start = Date.now();
+  this._progress = 100;
+  __privateSet(this, _progressIntervalId, window.setInterval(() => {
+    const elapsed = Date.now() - start;
+    this._progress = Math.max(
+      0,
+      (this.timeout - elapsed) / this.timeout * 100
+    );
+  }, PROGRESS_INTERVAL));
+  __privateSet(this, _timeoutId, window.setTimeout(
+    () => __privateMethod(this, _dismiss, dismiss_fn).call(this, "timeout"),
+    this.timeout
+  ));
+};
+_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, _clearTimers, clearTimers_fn).call(this);
+  await this.updateComplete;
+  this.dispatchCustomEvent("gds-close", {
+    detail: { source },
+    bubbles: true,
+    composed: true
+  });
+  await new Promise((r) => setTimeout(r, FADE_DURATION));
+  this._cardHidden = true;
+};
+_handleButtonClick = new WeakSet();
+handleButtonClick_fn = function(e) {
+  this.dispatchCustomEvent("gds-action", {
+    detail: { source: "button", event: e },
+    bubbles: true,
+    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");
+  }
+};
+_config = new WeakSet();
+config_get = function() {
+  return VARIANT_CONFIG[this.variant];
+};
+_renderIcon = new WeakSet();
+renderIcon_fn = function() {
+  const icon = `gds-icon-${__privateGet(this, _config, config_get).icon}`;
+  return html`${staticHtml`<${unsafeStatic(icon)} class="icon" solid aria-hidden="true" size="24px"></${unsafeStatic(icon)}>`}`;
+};
+_renderMessage = new WeakSet();
+renderMessage_fn = function() {
+  return html`<div class="message">
+      <span class="message-text">
+        <slot></slot>
+      </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)}
+        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"
+            size="small"
+            aria-label=${msg("Dismiss alert")}
+            @click=${() => __privateMethod(this, _dismiss, dismiss_fn).call(this, "close")}
+          >
+            <gds-icon-cross-small size="20px"></gds-icon-cross-small>
+          </gds-button>
+        ` : nothing;
+};
+_renderTimerBar = new WeakSet();
+renderTimerBar_fn = function() {
+  return this.timeout > 0 ? html`
+          <div
+            class="timer-bar"
+            role="timer"
+            aria-label=${msg("Auto-dismiss timer")}
+            aria-valuenow=${this._progress}
+            aria-valuemin="0"
+            aria-valuemax="100"
+          >
+            <div class="timer-progress" style="width: ${this._progress}%"></div>
+          </div>
+        ` : nothing;
+};
+GdsAlert.styles = [tokens, alertStyles];
+__decorateClass([
+  property({ type: String, reflect: true })
+], GdsAlert.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String })
+], GdsAlert.prototype, "label", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], GdsAlert.prototype, "role", 2);
+__decorateClass([
+  property({ type: Boolean })
+], GdsAlert.prototype, "dismissible", 2);
+__decorateClass([
+  property({ type: Number })
+], GdsAlert.prototype, "timeout", 2);
+__decorateClass([
+  property({ type: String, attribute: "button-label" })
+], GdsAlert.prototype, "buttonLabel", 2);
+__decorateClass([
+  state()
+], GdsAlert.prototype, "_progress", 2);
+__decorateClass([
+  state()
+], GdsAlert.prototype, "_isClosing", 2);
+__decorateClass([
+  state()
+], GdsAlert.prototype, "_cardHidden", 2);
+GdsAlert = __decorateClass([
+  gdsCustomElement("gds-alert", {
+    dependsOn: [
+      GdsButton,
+      GdsCard,
+      IconCircleCheck,
+      IconTriangleExclamation,
+      IconCircleInfo,
+      IconCrossSmall
+    ]
+  }),
+  localized()
+], GdsAlert);
+export {
+  GdsAlert
+};

package/components/alert/alert.d.ts

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

package/components/alert/alert.js

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

package/components/alert/alert.style.d.ts

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

package/components/alert/alert.style.js

@@ -0,0 +1,159 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+import { css } from "lit";
+const alertStyles = css`
+  :host {
+    display: block;
+    container-type: inline-size;
+    margin: 0.3rem;
+  }
+
+  #alert-message {
+    --grid-areas: 'icon message close' 'icon action close';
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas: var(--grid-areas);
+    width: 100%;
+    position: relative;
+    transition:
+      opacity 0.3s ease-out,
+      transform 0.3s ease-out;
+    gap: var(--gds-sys-space-xs);
+  }
+
+  /* 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-within {
+    outline: 2px solid var(--gds-focus-color, #000);
+    outline-offset: 2px;
+  }
+
+  /* Layout elements */
+  .icon {
+    grid-area: icon;
+  }
+
+  .message {
+    grid-area: message;
+    font-size: var(--gds-font-size-base, 1rem);
+    display: flex;
+    justify-content: flex-start;
+    text-align: left;
+    margin: 0 0 0 var(--gds-sys-space-2xs);
+  }
+
+  .message-text {
+    display: inline;
+    white-space: normal;
+    line-height: var(--gds-sys-text-line-height-body-m);
+    font-size: var(--gds-sys-text-size-body-m);
+  }
+
+  /* Buttons */
+
+  [gds-element='gds-button'] {
+    grid-area: unset;
+    width: auto;
+    min-width: auto;
+    display: inline-flex;
+  }
+
+  /* Timer bar */
+  .timer-bar {
+    position: absolute;
+    inset: auto 0 0;
+    height: 0.25rem;
+    background: var(--gds-border-color, rgba(0, 0, 0, 0.1));
+    border-radius: 0 0 var(--gds-radius-md, 0.25rem)
+      var(--gds-radius-md, 0.25rem);
+    overflow: hidden;
+  }
+
+  .timer-progress {
+    height: 100%;
+    transition: width 0.1s linear;
+    background: var(--gds-accent, currentColor);
+    opacity: 0.6;
+    will-change: width;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .timer-progress {
+      transition: none;
+    }
+  }
+
+  /* Responsive layouts */
+  /* Small: stacked */
+  @container (max-width: 600px) {
+    #alert-message {
+      grid-template-areas: 'icon message close' 'cta cta cta';
+    }
+
+    .action-button {
+      grid-area: cta;
+      margin-top: var(--gds-sys-space-xs);
+    }
+  }
+
+  /* Medium: inline */
+  @container (min-width: 601px) and (max-width: 1024px) {
+    #alert-message {
+      grid-template-areas: 'icon message cta close';
+    }
+    .message {
+      gap: 0.5rem;
+    }
+  }
+
+  /* Large: centered */
+  @container (min-width: 1025px) {
+    #alert-message {
+      grid-template-columns: auto 1fr auto auto;
+      grid-template-areas: 'icon message cta close';
+    }
+
+    .message {
+      justify-content: center;
+    }
+
+    .close-btn {
+      grid-area: close;
+      justify-self: end;
+    }
+  }
+
+  /* High contrast mode support */
+  @media (prefers-contrast: high) {
+    .icon {
+      forced-color-adjust: none;
+    }
+  }
+`;
+export {
+  alertStyles
+};

package/components/alert/index.d.ts

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

package/components/alert/index.js

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

package/components/popover/popover.component.js

@@ -143,7 +143,9 @@ let GdsPopover = class extends GdsElement {
     });
     this.addEventListener("focusin", (e) => {
       const t = e.target;
-      if (t === this || t.tagName === "INPUT" || t.tagName === "TEXTAREA") {
+      if (t === this)
+        return;
+      if (t.tagName === "INPUT" || t.tagName === "TEXTAREA") {
         this._isVirtKbVisible = true;
       } else {
         this._isVirtKbVisible = false;