@sebgroup/green-core 1.5.1 → 1.6.0

package/components/dropdown/dropdown.d.ts

@@ -10,7 +10,7 @@ import { CSSResult } from 'lit';
  *
  * @status beta
  *
- * @slot - Options for the dropdown. Accepts `gds-option` elements.
+ * @slot - Options for the dropdown. Accepts `gds-option` and `gds-menu-heading` elements.
  * @slot button - The trigger button for the dropdown. Custom content for the button can be assigned through this slot.
  * @slot sub-label - Renders between the label and the trigger button.
  * @slot message - Renders below the trigger button. Will be red if there is a validation error.

package/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from './dropdown/dropdown';
 export * from '../primitives/listbox/option';
+export * from '../primitives/menu/menu-heading';
 export * from './context-menu/context-menu';
 export * from '../primitives/menu/menu-item';
 export * from './datepicker/datepicker';

package/index.js

@@ -143,10 +143,11 @@ function watchMediaQuery(q) {
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-ea801b";
+var VER_SUFFIX = "-f9a04d";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
+    elementLookupTable.set(tagName, tagName);
     return customElement(tagName);
   }
   const versionedTagName = tagName + VER_SUFFIX;
@@ -419,7 +420,7 @@ var GdsListbox = class extends GdsElement {
     if (!__privateGet(this, _slotRef).value)
       return [];
     return unwrap(__privateGet(this, _slotRef).value).assignedElements().filter(
-      (o) => !o.hasAttribute("isplaceholder")
+      (o) => !o.hasAttribute("isplaceholder") && o.gdsElementName === "gds-option"
     ) || [];
   }
   /**
@@ -1286,7 +1287,7 @@ var GdsDropdown = class extends GdsFormControlElement {
           @gds-focus="${__privateGet(this, _handleOptionFocusChange)}"
           @keydown=${__privateGet(this, _handleListboxKeyDown)}
         >
-          <slot gds-allow="gds-option"></slot>
+          <slot gds-allow="gds-option gds-menu-heading"></slot>
         </gds-listbox>
       </gds-popover>
     `;
@@ -1434,6 +1435,44 @@ GdsDropdown = __decorateClass([
   gdsCustomElement("gds-dropdown")
 ], GdsDropdown);
 
+// libs/core/src/primitives/menu/menu-heading.ts
+import { html as html5 } from "lit";
+
+// libs/core/src/primitives/menu/menu-heading.styles.ts
+import { css as css5 } from "lit";
+var style5 = css5`
+  @layer base, reset, transitional-styles;
+  @layer base {
+    :host {
+      padding: 0.5 1rem;
+      cursor: pointer;
+    }
+
+    :host(:hover) {
+      background-color: grey;
+    }
+  }
+`;
+var menu_heading_styles_default = style5;
+
+// libs/core/src/primitives/menu/menu-heading.ts
+var GdsMenuHeading = class extends GdsElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("inert", "true");
+    this.updateComplete.then(
+      () => TransitionalStyles.instance.apply(this, "gds-menu-heading")
+    );
+  }
+  render() {
+    return html5`<slot></slot>`;
+  }
+};
+GdsMenuHeading.styles = menu_heading_styles_default;
+GdsMenuHeading = __decorateClass([
+  gdsCustomElement("gds-menu-heading")
+], GdsMenuHeading);
+
 // libs/core/src/components/context-menu/context-menu.ts
 import { nothing } from "lit";
 import { msg as msg3 } from "@lit/localize";
@@ -1459,7 +1498,7 @@ var GdsMenu = class extends GdsElement {
     if (!this.#slotRef.value)
       return [];
     return unwrap(this.#slotRef.value).assignedElements().filter(
-      (o) => !o.hasAttribute("isplaceholder")
+      (o) => !o.hasAttribute("isplaceholder") && o.gdsElementName === "gds-menu-item"
     ) || [];
   }
   /**
@@ -1531,7 +1570,7 @@ var GdsContextMenu = class extends GdsElement {
           aria-label=${this.label ?? this.buttonLabel}
           @gds-menu-item-click=${__privateMethod(this, _handleItemClick, handleItemClick_fn)}
         >
-          <slot allow="gds-menu-item"></slot>
+          <slot allow="gds-menu-item gds-menu-heading"></slot>
         </gds-menu>
       </gds-popover>`;
   }
@@ -1622,7 +1661,7 @@ import { nothing as nothing2 } from "lit";
 import { msg as msg5 } from "@lit/localize";
 
 // libs/core/src/primitives/calendar/calendar.ts
-import { html as html6 } from "lit";
+import { html as html7 } from "lit";
 import { classMap as classMap4 } from "lit/directives/class-map.js";
 import { when as when3 } from "lit/directives/when.js";
 import { property as property7, query as query2, state as state8 } from "lit/decorators.js";
@@ -1644,7 +1683,7 @@ import {
   eachWeekOfInterval,
   eachDayOfInterval
 } from "date-fns";
-import { html as html5 } from "lit-html";
+import { html as html6 } from "lit-html";
 function renderMonthGridView(date, template) {
   const monthStart = startOfMonth(date);
   const monthEnd = endOfMonth(date);
@@ -1652,7 +1691,7 @@ function renderMonthGridView(date, template) {
     { start: monthStart, end: monthEnd },
     { weekStartsOn: 1 }
   );
-  return html5`${template(
+  return html6`${template(
     weeks.map((weekStartDay) => ({
       days: eachDayOfInterval({
         start: weekStartDay,
@@ -1663,8 +1702,8 @@ function renderMonthGridView(date, template) {
 }
 
 // libs/core/src/primitives/calendar/calendar.styles.ts
-import { css as css5 } from "lit";
-var style5 = css5`
+import { css as css6 } from "lit";
+var style6 = css6`
   @layer base, reset, transitional-styles;
   @layer base {
     td.disabled {
@@ -1676,7 +1715,7 @@ var style5 = css5`
     }
   }
 `;
-var calendar_styles_default = style5;
+var calendar_styles_default = style6;
 
 // libs/core/src/primitives/calendar/calendar.ts
 var _setSelectedDate, setSelectedDate_fn, _handleKeyDown, handleKeyDown_fn;
@@ -1720,11 +1759,11 @@ var GdsCalendar = class extends GdsElement {
   }
   render() {
     const currentDate = /* @__PURE__ */ new Date();
-    return html6`${this._tStyles}
+    return html7`${this._tStyles}
       <table>
         <thead>
           <tr>
-            ${when3(this.showWeekNumbers, () => html6`<th></th>`)}
+            ${when3(this.showWeekNumbers, () => html7`<th></th>`)}
             <th>${msg4("Mon")}</th>
             <th>${msg4("Tue")}</th>
             <th>${msg4("Wed")}</th>
@@ -1737,19 +1776,19 @@ var GdsCalendar = class extends GdsElement {
         <tbody>
           ${renderMonthGridView(
       this.focusedDate,
-      (weeks) => html6`
+      (weeks) => html7`
               ${weeks.map(
-        (week) => html6`
+        (week) => html7`
                   <tr>
                     ${when3(
           this.showWeekNumbers,
-          () => html6`<td class="week-number">
+          () => html7`<td class="week-number">
                           ${getWeek(week.days[0])}
                         </td>`
         )}
                     ${week.days.map((day) => {
           const isDisabled = !isSameMonth(this.focusedDate, day) || day < this.min || day > this.max;
-          return html6`
+          return html7`
                         <td
                           class="${classMap4({
             disabled: isDisabled,
@@ -1883,10 +1922,10 @@ GdsCalendar = __decorateClass([
 ], GdsCalendar);
 
 // libs/core/src/components/datepicker/date-part-spinner.ts
-import { LitElement as LitElement7 } from "lit";
+import { LitElement as LitElement6 } from "lit";
 import { property as property8, state as state9 } from "lit/decorators.js";
 var _inputBuffer, _increment, _decrement, _handleClick, _handleFocus, _handleBlur, _handleWheel, _handleKeyDown2, _focusNextSpinner, focusNextSpinner_fn, _dispatchChangeEvent, dispatchChangeEvent_fn, _formatNumber, formatNumber_fn, _clamp, clamp_fn, _clearInputBuffer, clearInputBuffer_fn;
-var GdsDatePartSpinner = class extends LitElement7 {
+var GdsDatePartSpinner = class extends LitElement6 {
   constructor() {
     super(...arguments);
     __privateAdd(this, _focusNextSpinner);
@@ -1928,7 +1967,6 @@ var GdsDatePartSpinner = class extends LitElement7 {
       __privateMethod(this, _clearInputBuffer, clearInputBuffer_fn).call(this);
       this.value = __privateMethod(this, _clamp, clamp_fn).call(this, parseInt(this.value.toString()));
       __privateMethod(this, _dispatchChangeEvent, dispatchChangeEvent_fn).call(this);
-      document.getSelection()?.removeAllRanges();
     });
     __privateAdd(this, _handleWheel, (e) => {
       e.stopPropagation();
@@ -2059,8 +2097,8 @@ GdsDatePartSpinner = __decorateClass([
 ], GdsDatePartSpinner);
 
 // libs/core/src/components/datepicker/datepicker.styles.ts
-import { css as css6 } from "lit";
-var styles = css6`
+import { css as css7 } from "lit";
+var styles = css7`
   @layer base, reset, transitional-styles;
   @layer base {
     label {
@@ -2078,7 +2116,7 @@ var dateConverter = {
     return value.toISOString();
   }
 };
-var _valueOnOpen, _renderBackToValidRangeButton, renderBackToValidRangeButton_fn, _focusDate, focusDate_fn, _getSpinnerLabel, getSpinnerLabel_fn, _getMinSpinnerValue, getMinSpinnerValue_fn, _getMaxSpinnerValue, getMaxSpinnerValue_fn, _dispatchChangeEvent2, dispatchChangeEvent_fn2, _dispatchInputEvent, dispatchInputEvent_fn, _handleClipboardCopy, _handleClipboardPaste, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleCalendarFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, _parseDateFormat, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, _years, years_get, _isValueOutsideRange, isValueOutsideRange_get;
+var _valueOnOpen, _renderBackToValidRangeButton, renderBackToValidRangeButton_fn, _focusDate, focusDate_fn, _getSpinnerLabel, getSpinnerLabel_fn, _getMinSpinnerValue, getMinSpinnerValue_fn, _getMaxSpinnerValue, getMaxSpinnerValue_fn, _dispatchChangeEvent2, dispatchChangeEvent_fn2, _dispatchInputEvent, dispatchInputEvent_fn, _handleFieldFocusOut, _handleSpinnerFocus, _handleClipboardCopy, _handleClipboardPaste, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleCalendarFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, _parseDateFormat, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, _years, years_get, _isValueOutsideRange, isValueOutsideRange_get;
 var GdsDatepicker = class extends GdsFormControlElement {
   constructor() {
     super(...arguments);
@@ -2107,24 +2145,48 @@ var GdsDatepicker = class extends GdsFormControlElement {
     this._focusedYear = (/* @__PURE__ */ new Date()).getFullYear();
     this._dateFormatLayout = __privateMethod(this, _parseDateFormat, parseDateFormat_fn).call(this, "y-m-d");
     __privateAdd(this, _valueOnOpen, void 0);
+    __privateAdd(this, _handleFieldFocusOut, (e) => {
+      this._elTrigger.then((_) => {
+        const parent = e.relatedTarget?.parentElement;
+        if (parent === e.target)
+          return;
+        document.getSelection()?.removeAllRanges();
+      });
+    });
+    __privateAdd(this, _handleSpinnerFocus, (e) => {
+      this._elTrigger.then((field) => {
+        document.getSelection()?.removeAllRanges();
+        const range = new Range();
+        range.setStart(field.firstChild, 0);
+        range.setEnd(field.lastChild, 4);
+        document.getSelection()?.addRange(range);
+      });
+    });
     __privateAdd(this, _handleClipboardCopy, (e) => {
-      e.preventDefault();
-      e.clipboardData?.setData("text/plain", this.displayValue);
+      this._elTrigger.then((field) => {
+        if (e.currentTarget !== field)
+          return;
+        e.preventDefault();
+        e.clipboardData?.setData("text/plain", this.displayValue);
+      });
     });
     __privateAdd(this, _handleClipboardPaste, (e) => {
-      e.preventDefault();
-      const pasted = e.clipboardData?.getData("text/plain");
-      if (!pasted)
-        return;
-      const pastedDate = new Date(pasted);
-      if (pastedDate.toString() === "Invalid Date")
-        return;
-      this.value = pastedDate;
-      __privateMethod(this, _dispatchChangeEvent2, dispatchChangeEvent_fn2).call(this);
+      this._elTrigger.then((field) => {
+        if (e.currentTarget !== field)
+          return;
+        e.preventDefault();
+        const pasted = e.clipboardData?.getData("text/plain");
+        if (!pasted)
+          return;
+        const pastedDate = new Date(pasted);
+        if (pastedDate.toString() === "Invalid Date")
+          return;
+        this.value = pastedDate;
+        __privateMethod(this, _dispatchChangeEvent2, dispatchChangeEvent_fn2).call(this);
+      });
     });
     __privateAdd(this, _handleFieldClick, (e) => {
       this._elSpinners[0].focus();
-      window.getSelection()?.selectAllChildren(this._elSpinners[0]);
     });
     __privateAdd(this, _handleCalendarChange, (e) => {
       e.stopPropagation();
@@ -2254,7 +2316,7 @@ var GdsDatepicker = class extends GdsFormControlElement {
         @copy=${__privateGet(this, _handleClipboardCopy)}
         @paste=${__privateGet(this, _handleClipboardPaste)}
       >
-        <div class="input">
+        <div class="input" @focusout=${__privateGet(this, _handleFieldFocusOut)}>
           ${join(
       map(
         this._dateFormatLayout.layout,
@@ -2268,6 +2330,7 @@ var GdsDatepicker = class extends GdsFormControlElement {
                   aria-describedby="label"
                   @keydown=${__privateGet(this, _handleSpinnerKeydown)}
                   @change=${(e) => __privateGet(this, _handleSpinnerChange).call(this, e.detail.value, f.name)}
+                  @focus=${__privateGet(this, _handleSpinnerFocus)}
                 ></gds-date-part-spinner>`
       ),
       html`<span>${this._dateFormatLayout.delimiter}</span>`
@@ -2476,6 +2539,8 @@ dispatchInputEvent_fn = function() {
     })
   );
 };
+_handleFieldFocusOut = new WeakMap();
+_handleSpinnerFocus = new WeakMap();
 _handleClipboardCopy = new WeakMap();
 _handleClipboardPaste = new WeakMap();
 _handleFieldClick = new WeakMap();
@@ -2592,6 +2657,7 @@ export {
   GdsContextMenu,
   GdsDatepicker,
   GdsDropdown,
+  GdsMenuHeading,
   GdsMenuItem,
   GdsOption,
   VER_SUFFIX,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/primitives/listbox/option.d.ts

@@ -1,11 +1,10 @@
-import { LitElement } from 'lit';
 import { GdsElement } from '../../gds-element';
 import 'reflect-metadata';
 export interface OptionsContainer extends HTMLElement {
     options: GdsOption[];
     multiple: boolean;
 }
-declare const GdsOption_base: (new (...args: any[]) => LitElement) & typeof GdsElement;
+declare const GdsOption_base: (new (...args: any[]) => import("lit").LitElement) & typeof GdsElement;
 /**
  * @element gds-option
  * @internal

package/primitives/menu/menu-heading.d.ts

@@ -0,0 +1,6 @@
+import { GdsElement } from '../../gds-element';
+export declare class GdsMenuHeading extends GdsElement {
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/primitives/menu/menu-heading.styles.d.ts

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

package/transitional-styles.js

@@ -146,10 +146,32 @@ var option_trans_styles_default = `/**
   }
 }`;
 
+// libs/core/src/primitives/menu/menu-heading.trans.styles.scss
+var menu_heading_trans_styles_default = `@layer base, reset, transitional-styles;
+@layer transitional-styles {
+  :host {
+    padding: 0.5rem 1rem;
+    background-color: var(--gds-ref-pallet-base100);
+    color: var(--gds-ref-pallet-base800);
+    display: flex;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    font-size: 0.875rem;
+  }
+  :host([aria-hidden=true]) {
+    display: none;
+  }
+}`;
+
 // libs/core/src/primitives/listbox/listbox.trans.styles.ts
 function register() {
   TransitionalStyles.instance.register("gds-listbox", listbox_trans_styles_default.toString());
   TransitionalStyles.instance.register("gds-option", option_trans_styles_default.toString());
+  TransitionalStyles.instance.register(
+    "gds-menu-heading",
+    menu_heading_trans_styles_default.toString()
+  );
 }
 
 // libs/core/src/primitives/popover/popover.trans.styles.scss
@@ -1967,6 +1989,7 @@ a.button.tertiary.danger:focus-visible {
     width: 2rem;
     border-radius: 50%;
     position: relative;
+    --color: var(--gds-sys-color-base);
   }
   .close:not(:disabled):not(.disabled) > div::after, .close:not(:disabled):not(.disabled) > div::before {
     height: 0.789375rem;
@@ -3071,16 +3094,22 @@ i.sg-icon.sg-icon-ellipsis::before {
     outline-width: 0.125rem;
     outline-offset: 0.125rem;
   }
+  .field .input::-moz-selection {
+    background: transparent;
+  }
+  .field .input::selection {
+    background: transparent;
+  }
   .field span {
-    cursor: default;
+    cursor: text;
   }
   .field [role=spinbutton] {
-    cursor: default;
+    cursor: text;
     display: inline-block;
   }
   .field [role=spinbutton]:focus {
-    background: color-mix(in srgb, var(--gds-sys-color-blue) 50%, transparent);
     outline: none;
+    background: color-mix(in srgb, var(--gds-sys-color-blue) 50%, transparent);
   }
   .field [role=spinbutton]::-moz-selection {
     background: transparent;
@@ -3215,7 +3244,7 @@ function register6() {
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-ea801b";
+var VER_SUFFIX = "-f9a04d";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var templateCache = /* @__PURE__ */ new WeakMap();
 function applyElementScoping(strings, ...values) {