@sebgroup/green-core 3.23.0 → 3.24.1

package/assets/icons/regular/satellite.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C14.2998 21.25 16.4036 20.4107 18.0217 19.0217L4.97828 5.97827C3.58929 7.59643 2.75 9.7002 2.75 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 12L13 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.25 12C21.25 6.89137 17.1086 2.75 12 2.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18 12C18 8.68629 15.3137 6 12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/assets/icons/solid/satellite.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2C11.5858 2 11.25 2.33579 11.25 2.75C11.25 3.16421 11.5858 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12C20.5 12.4142 20.8358 12.75 21.25 12.75C21.6642 12.75 22 12.4142 22 12C22 6.47715 17.5228 2 12 2Z" fill="currentColor"/>
+<path d="M5.50861 5.44794C5.36096 5.30029 5.15843 5.22087 4.94977 5.22881C4.7411 5.23675 4.5452 5.33132 4.40919 5.48977C2.90789 7.23877 2 9.5143 2 12C2 17.5228 6.47715 22 12 22C14.4857 22 16.7612 21.0921 18.5102 19.5908C18.6687 19.4548 18.7632 19.2589 18.7712 19.0502C18.7791 18.8416 18.6997 18.639 18.552 18.4914L12.5607 12.5L13.5303 11.5303C13.8232 11.2374 13.8232 10.7626 13.5303 10.4697C13.2374 10.1768 12.7626 10.1768 12.4697 10.4697L11.5 11.4393L5.50861 5.44794Z" fill="currentColor"/>
+<path d="M12 5.25C11.5858 5.25 11.25 5.58579 11.25 6C11.25 6.41421 11.5858 6.75 12 6.75C14.8995 6.75 17.25 9.10051 17.25 12C17.25 12.4142 17.5858 12.75 18 12.75C18.4142 12.75 18.75 12.4142 18.75 12C18.75 8.27208 15.7279 5.25 12 5.25Z" fill="currentColor"/>
+</svg>

package/components/button/button.component.js

@@ -28,7 +28,12 @@ import {
 import { GdsFormControlElement } from "../form/form-control.js";
 import ButtonStyles from "./button.styles.js";
 const ariaForwards = ["aria-label", "aria-haspopup", "aria-expanded"];
-const attributeForwards = [...ariaForwards, "gds-tabindex", "gds-aria-selected"];
+const attributeForwards = [
+  ...ariaForwards,
+  "gds-tabindex",
+  "gds-aria-selected",
+  "gds-aria-expanded"
+];
 const html = stripWhitespace(customElementHtml);
 let Button = class extends GdsFormControlElement {
   constructor() {

package/components/calendar/calendar.component.js

@@ -26,6 +26,7 @@ import { tokens } from "../../tokens.style.js";
 import { TransitionalStyles } from "../../transitional-styles.js";
 import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import { watch } from "../../utils/decorators/watch.js";
+import { dateHasChanged } from "../../utils/helpers/has-changed.js";
 import CalendarStyles from "./calendar.styles.js";
 import { renderMonthGridView } from "./functions.js";
 let GdsCalendar = class extends GdsElement {
@@ -268,7 +269,7 @@ GdsCalendar.shadowRootOptions = {
   delegatesFocus: true
 };
 __decorateClass([
-  property()
+  property({ hasChanged: dateHasChanged })
 ], GdsCalendar.prototype, "value", 2);
 __decorateClass([
   property({ type: Date })

package/components/context-menu/context-menu.component.js

@@ -132,6 +132,9 @@ let GdsContextMenu = class extends withMarginProps(
       ${when(this.open, __privateGet(this, _renderPopover))}`;
   }
   _handleOpenChange() {
+    if (__privateGet(this, _elTriggerBtn)) {
+      applyTriggerAriaAttributes(__privateGet(this, _elTriggerBtn), this.open, "menu");
+    }
     if (!this.open) {
       requestAnimationFrame(() => __privateGet(this, _elTriggerBtn)?.focus());
     }

package/components/datepicker/datepicker.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.CAV4X6PU.js";
-var _utcHours, _valueOnOpen, _shouldShowFooter, shouldShowFooter_fn, _renderBackToValidRangeButton, renderBackToValidRangeButton_fn, _updateOutOfRangeAction, updateOutOfRangeAction_fn, _normalizeDate, normalizeDate_fn, _focusDate, focusDate_fn, _shouldShowTodayButton, shouldShowTodayButton_fn, _getSpinnerLabel, getSpinnerLabel_fn, _getMinSpinnerValue, getMinSpinnerValue_fn, _getMaxSpinnerValue, getMaxSpinnerValue_fn, _getLocalizedPlaceholder, getLocalizedPlaceholder_fn, _getSpinnerValue, getSpinnerValue_fn, _dispatchChangeEvent, dispatchChangeEvent_fn, _dispatchInputEvent, dispatchInputEvent_fn, _handleSpinnerFocus, _handleClipboardCopy, _handleClipboardPaste, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleCalendarFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, _parseDateFormat, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, _years, years_get, _isValueOutsideRange, isValueOutsideRange_get;
+var _utcHours, _valueOnOpen, _shouldShowFooter, shouldShowFooter_fn, _renderBackToValidRangeButton, renderBackToValidRangeButton_fn, _updateOutOfRangeAction, updateOutOfRangeAction_fn, _normalizeDate, normalizeDate_fn, _focusDate, focusDate_fn, _isDateSelectable, isDateSelectable_fn, _nearestSelectableDate, nearestSelectableDate_fn, _shouldShowTodayButton, shouldShowTodayButton_fn, _getSpinnerLabel, getSpinnerLabel_fn, _getMinSpinnerValue, getMinSpinnerValue_fn, _getMaxSpinnerValue, getMaxSpinnerValue_fn, _getLocalizedPlaceholder, getLocalizedPlaceholder_fn, _getSpinnerValue, getSpinnerValue_fn, _dispatchChangeEvent, dispatchChangeEvent_fn, _dispatchInputEvent, dispatchInputEvent_fn, _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";
@@ -13,7 +13,7 @@ import { join } from "lit/directives/join.js";
 import { map } from "lit/directives/map.js";
 import { repeat } from "lit/directives/repeat.js";
 import { when } from "lit/directives/when.js";
-import { isSameDay, lastDayOfMonth, setHours } from "date-fns";
+import { addDays, isSameDay, lastDayOfMonth, setHours } from "date-fns";
 import { GdsButton } from "../../components/button/button.component.js";
 import { GdsDropdown } from "../../components/dropdown/dropdown.component.js";
 import { GdsFlex } from "../../components/flex/flex.component.js";
@@ -27,6 +27,7 @@ import {
   dateArrayConverter,
   dateConverter
 } from "../../utils/helpers/attribute-converters.js";
+import { dateHasChanged } from "../../utils/helpers/has-changed.js";
 import {
   withLayoutChildProps,
   withMarginProps,
@@ -52,7 +53,24 @@ let Datepicker = class extends GdsFormControlElement {
      * the local calendar day is preserved, then to the configured UTC hour.
      */
     __privateAdd(this, _normalizeDate);
+    /**
+     * Focuses (and selects) a date in the calendar. The month/year state and value are derived
+     * directly from `d` rather than read back from the calendar element asynchronously, so that a
+     * concurrent update (e.g. the host re-assigning an equivalent `value`) cannot race with, and
+     * overwrite, the requested focus change.
+     */
     __privateAdd(this, _focusDate);
+    /**
+     * Whether the given date can be selected, taking `min`/`max`, `disabledWeekends` and
+     * `disabledDates` into account.
+     */
+    __privateAdd(this, _isDateSelectable);
+    /**
+     * Finds the nearest selectable date starting from `from` (inclusive), stepping a day at a time in
+     * `direction` (`1` towards `max`, `-1` towards `min`). Falls back to `from` if the min/max range is
+     * exhausted without finding a selectable date.
+     */
+    __privateAdd(this, _nearestSelectableDate);
     __privateAdd(this, _shouldShowTodayButton);
     __privateAdd(this, _getSpinnerLabel);
     __privateAdd(this, _getMinSpinnerValue);
@@ -254,6 +272,8 @@ let Datepicker = class extends GdsFormControlElement {
     return super.value;
   }
   set value(value) {
+    if (!dateHasChanged(value, super.value))
+      return;
     super.value = value;
   }
   get utcHours() {
@@ -606,13 +626,14 @@ renderBackToValidRangeButton_fn = function() {
   if (!this._outOfRangeAction)
     return nothing;
   const isAfterMax = this._outOfRangeAction === "max";
+  const target = isAfterMax ? __privateMethod(this, _nearestSelectableDate, nearestSelectableDate_fn).call(this, this.max, -1) : __privateMethod(this, _nearestSelectableDate, nearestSelectableDate_fn).call(this, this.min, 1);
   return html`<gds-button
       id="back-to-valid-range-button"
       rank="tertiary"
       size="small"
       @click=${(e) => {
     e.stopPropagation();
-    __privateMethod(this, _focusDate, focusDate_fn).call(this, isAfterMax ? this.max : this.min);
+    __privateMethod(this, _focusDate, focusDate_fn).call(this, target);
   }}
     >
       ${isAfterMax ? msg("Last available date") : msg("First available date")}
@@ -639,20 +660,43 @@ normalizeDate_fn = function(d) {
 _focusDate = new WeakSet();
 focusDate_fn = function(d) {
   const focusDate = __privateMethod(this, _normalizeDate, normalizeDate_fn).call(this, d);
-  this._elCalendar.then((el) => el.focusedDate = focusDate).then(__privateGet(this, _handleCalendarFocusChange)).then(() => this._elCalendar).then((el) => el.updateComplete.then(() => el.focus()));
+  this._focusedMonth = focusDate.getMonth();
+  this._focusedYear = focusDate.getFullYear();
+  this.value = new Date(focusDate);
+  this.requestUpdate();
+  __privateMethod(this, _dispatchInputEvent, dispatchInputEvent_fn).call(this);
+  this._elCalendar.then((el) => {
+    el.focusedDate = focusDate;
+    el.updateComplete.then(() => el.focus());
+  });
 };
-_shouldShowTodayButton = new WeakSet();
-shouldShowTodayButton_fn = function() {
-  if (this.hideTodayButton)
-    return false;
-  const today = __privateMethod(this, _normalizeDate, normalizeDate_fn).call(this, /* @__PURE__ */ new Date());
-  const isOutsideMinMax = (today < this.min || today > this.max) && !isSameDay(today, this.min) && !isSameDay(today, this.max);
+_isDateSelectable = new WeakSet();
+isDateSelectable_fn = function(date) {
+  const isOutsideMinMax = (date < this.min || date > this.max) && !isSameDay(date, this.min) && !isSameDay(date, this.max);
   if (isOutsideMinMax)
     return false;
-  const isWeekend = today.getDay() === 0 || today.getDay() === 6;
+  const isWeekend = date.getDay() === 0 || date.getDay() === 6;
   if (this.disabledWeekends && isWeekend)
     return false;
-  return !this.disabledDates?.some((d) => isSameDay(d, today));
+  return !this.disabledDates?.some((d) => isSameDay(d, date));
+};
+_nearestSelectableDate = new WeakSet();
+nearestSelectableDate_fn = function(from, direction) {
+  let candidate = new Date(from);
+  while (!__privateMethod(this, _isDateSelectable, isDateSelectable_fn).call(this, candidate)) {
+    const next = addDays(candidate, direction);
+    const passedBoundary = direction === 1 ? next > this.max : next < this.min;
+    if (passedBoundary)
+      return from;
+    candidate = next;
+  }
+  return candidate;
+};
+_shouldShowTodayButton = new WeakSet();
+shouldShowTodayButton_fn = function() {
+  if (this.hideTodayButton)
+    return false;
+  return __privateMethod(this, _isDateSelectable, isDateSelectable_fn).call(this, __privateMethod(this, _normalizeDate, normalizeDate_fn).call(this, /* @__PURE__ */ new Date()));
 };
 _getSpinnerLabel = new WeakSet();
 getSpinnerLabel_fn = function(name) {
@@ -768,7 +812,7 @@ isValueOutsideRange_get = function() {
 };
 Datepicker.styles = [tokens, formControlHostStyle, DatepickerStyles];
 __decorateClass([
-  property({ converter: dateConverter })
+  property({ converter: dateConverter, hasChanged: dateHasChanged })
 ], Datepicker.prototype, "value", 1);
 __decorateClass([
   property({ converter: dateConverter })

package/components/icon/icons/index.d.ts

@@ -250,6 +250,7 @@ export * from './robot';
 export * from './rocket';
 export * from './run-shortcut';
 export * from './safari';
+export * from './satellite';
 export * from './school';
 export * from './scissors';
 export * from './search-menu';

package/components/icon/icons/index.js

@@ -250,6 +250,7 @@ export * from "./robot.js";
 export * from "./rocket.js";
 export * from "./run-shortcut.js";
 export * from "./safari.js";
+export * from "./satellite.js";
 export * from "./school.js";
 export * from "./scissors.js";
 export * from "./search-menu.js";

package/components/icon/icons/pure.d.ts

@@ -250,6 +250,7 @@ export * from './robot.component';
 export * from './rocket.component';
 export * from './run-shortcut.component';
 export * from './safari.component';
+export * from './satellite.component';
 export * from './school.component';
 export * from './scissors.component';
 export * from './search-menu.component';

package/components/icon/icons/pure.js

@@ -250,6 +250,7 @@ export * from "./robot.component.js";
 export * from "./rocket.component.js";
 export * from "./run-shortcut.component.js";
 export * from "./safari.component.js";
+export * from "./satellite.component.js";
 export * from "./school.component.js";
 export * from "./scissors.component.js";
 export * from "./search-menu.component.js";

package/components/icon/icons/satellite.component.d.ts

@@ -0,0 +1,18 @@
+import { GdsIcon } from '../icon';
+/**
+ * @element gds-icon-satellite
+ */
+export declare class IconSatellite extends GdsIcon {
+    /** @private */
+    static _regularSVG: string;
+    /** @private */
+    static _solidSVG: string;
+    /** @private */
+    static _name: string;
+    /** @private */
+    static _width: number;
+    /** @private */
+    static _height: number;
+    /** @private */
+    static _viewBox: string;
+}

package/components/icon/icons/satellite.component.js

@@ -0,0 +1,25 @@
+import {
+  __decorateClass
+} from "../../../chunks/chunk.CAV4X6PU.js";
+import { gdsCustomElement } from "../../../scoping.js";
+import { GdsIcon } from "../icon.js";
+let IconSatellite = class extends GdsIcon {
+};
+/** @private */
+IconSatellite._regularSVG = `<path d="M2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C14.2998 21.25 16.4036 20.4107 18.0217 19.0217L4.97828 5.97827C3.58929 7.59643 2.75 9.7002 2.75 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 12L13 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M21.25 12C21.25 6.89137 17.1086 2.75 12 2.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 12C18 8.68629 15.3137 6 12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>`;
+/** @private */
+IconSatellite._solidSVG = `<path d="M12 2C11.5858 2 11.25 2.33579 11.25 2.75C11.25 3.16421 11.5858 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12C20.5 12.4142 20.8358 12.75 21.25 12.75C21.6642 12.75 22 12.4142 22 12C22 6.47715 17.5228 2 12 2Z" fill="currentColor"/><path d="M5.50861 5.44794C5.36096 5.30029 5.15843 5.22087 4.94977 5.22881C4.7411 5.23675 4.5452 5.33132 4.40919 5.48977C2.90789 7.23877 2 9.5143 2 12C2 17.5228 6.47715 22 12 22C14.4857 22 16.7612 21.0921 18.5102 19.5908C18.6687 19.4548 18.7632 19.2589 18.7712 19.0502C18.7791 18.8416 18.6997 18.639 18.552 18.4914L12.5607 12.5L13.5303 11.5303C13.8232 11.2374 13.8232 10.7626 13.5303 10.4697C13.2374 10.1768 12.7626 10.1768 12.4697 10.4697L11.5 11.4393L5.50861 5.44794Z" fill="currentColor"/><path d="M12 5.25C11.5858 5.25 11.25 5.58579 11.25 6C11.25 6.41421 11.5858 6.75 12 6.75C14.8995 6.75 17.25 9.10051 17.25 12C17.25 12.4142 17.5858 12.75 18 12.75C18.4142 12.75 18.75 12.4142 18.75 12C18.75 8.27208 15.7279 5.25 12 5.25Z" fill="currentColor"/>`;
+/** @private */
+IconSatellite._name = "satellite";
+/** @private */
+IconSatellite._width = 24;
+/** @private */
+IconSatellite._height = 24;
+/** @private */
+IconSatellite._viewBox = "0 0 24 24";
+IconSatellite = __decorateClass([
+  gdsCustomElement("gds-icon-satellite")
+], IconSatellite);
+export {
+  IconSatellite
+};

package/components/icon/icons/satellite.d.ts

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

package/components/icon/icons/satellite.js

@@ -0,0 +1,6 @@
+import "../../../chunks/chunk.CAV4X6PU.js";
+import { IconSatellite } from "./satellite.component.js";
+IconSatellite.define();
+export {
+  IconSatellite
+};

package/components/link/link.styles.js

@@ -12,9 +12,16 @@ const style = css`
 
   @layer link {
     a {
-      display: flex;
-      align-items: center;
-      gap: 1ch;
+      /*
+       * Intentionally not display: flex. A flex row only wraps onto a new
+       * flex line if the container wraps, but text wrapping inside a flex
+       * item happens within a single flex line. That caused lead/trail
+       * icons to center against the full height of multi-line wrapped text
+       * instead of following the specific line they're adjacent to.
+       * display: inline lets icons flow and wrap together with the text
+       * like any other inline content.
+       */
+      display: inline;
       text-decoration: none;
       text-underline-offset: 0.2lh;
       color: currentColor;
@@ -39,6 +46,19 @@ const style = css`
         }
       }
     }
+
+    ::slotted(*) {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    slot[name='lead']::slotted(*) {
+      margin-inline-end: 1ch;
+    }
+
+    slot[name='trail']::slotted(*) {
+      margin-inline-start: 1ch;
+    }
   }
 `;
 var link_styles_default = style;

package/components/popover/popover.component.js

@@ -27,7 +27,8 @@ function roundByDPR(value) {
   return Math.round(value * dpr) / dpr;
 }
 function applyTriggerAriaAttributes(trigger, open, popupRole) {
-  trigger.setAttribute("aria-expanded", String(open));
+  const ariaExpandedAttr = trigger.nodeName.startsWith("GDS-") ? "gds-aria-expanded" : "aria-expanded";
+  trigger.setAttribute(ariaExpandedAttr, String(open));
   const focusableNodeNames = ["A", "BUTTON", "INPUT", "TEXTAREA"];
   const isProbablyFocusable = trigger.nodeName.startsWith("GDS-") || focusableNodeNames.includes(trigger.nodeName);
   if (!isProbablyFocusable) {
@@ -222,7 +223,7 @@ let GdsPopover = class extends GdsElement {
   }
   _handleOpenChange() {
     this.updateComplete.then(() => {
-      this._trigger?.setAttribute("aria-expanded", String(this.open));
+      __privateMethod(this, _setupTriggerAttributes, setupTriggerAttributes_fn).call(this);
       if (this.open) {
         !this.nonmodal ? this._elDialog?.showModal() : this._elDialog?.setAttribute("open", "true");
         if (this.autofocus) {