@sebgroup/green-core 1.9.0 → 1.9.2

package/index.js

@@ -144,7 +144,7 @@ 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 = "-af766e";
+var VER_SUFFIX = "-2d68d7";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
@@ -1315,7 +1315,7 @@ var GdsDropdown = class extends GdsFormControlElement {
       this._handleValueChange();
       return;
     }
-    if (!this.value) {
+    if (this.value === void 0) {
       if (this.placeholder)
         this.value = this.placeholder.value;
       else
@@ -1761,7 +1761,10 @@ var GdsCalendar = class extends GdsElement {
     return this.focusedDate.getMonth();
   }
   set focusedMonth(month) {
-    this.focusedDate = new Date(this.focusedDate.setMonth(month));
+    const newDate = new Date(this.focusedDate);
+    newDate.setMonth(month);
+    newDate.setHours(0, 0, 0, 0);
+    this.focusedDate = newDate;
   }
   get focusedYear() {
     return this.focusedDate.getFullYear();
@@ -2275,6 +2278,10 @@ var GdsDatepicker = class extends GdsFormControlElement {
       this.open = e.detail.open;
       if (e.detail.reason === "close") {
         this.value = (await this._elCalendar).value;
+        if (this.value) {
+          this._focusedMonth = this.value.getMonth();
+          this._focusedYear = this.value.getFullYear();
+        }
         __privateMethod(this, _dispatchChangeEvent2, dispatchChangeEvent_fn2).call(this);
       }
       if (e.detail.reason === "cancel") {

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.9.0",
+  "version": "1.9.2",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/transitional-styles.js

@@ -89,25 +89,25 @@ var option_trans_styles_default = `/**
             user-select: none;
   }
   :host:hover, :host:focus-visible {
-    background-color: var(--gds-ref-pallet-base200);
+    background-color: var(--grey-400);
   }
   :host:active {
-    background-color: var(--gds-ref-pallet-base300);
+    background-color: var(--grey-400);
   }
   :host:focus {
     outline-color: #000;
     outline-offset: -0.25rem;
   }
   :host.active.sg-highlighted, :host[aria-selected=true] {
-    background: var(--gds-ref-pallet-base800);
+    background: var(--grey-1000);
     color: #fff;
   }
   :host(:hover),
   :host(:focus-visible) {
-    background-color: var(--gds-ref-pallet-base200);
+    background-color: var(--grey-400);
   }
   :host(:active) {
-    background-color: var(--gds-ref-pallet-base300);
+    background-color: var(--grey-500);
   }
   :host(:focus) {
     outline-color: #000;
@@ -117,7 +117,7 @@ var option_trans_styles_default = `/**
     display: none;
   }
   :host([highlighted]) {
-    background: var(--gds-ref-pallet-base800);
+    background: var(--grey-1000);
     color: #fff;
   }
   .checkbox {
@@ -662,6 +662,7 @@ button[type=button]:where(:not(.primary,
 button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):disabled,
 button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)).disabled,
 button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link))[aria-disabled=true] {
+  background: var(--sg-form-control-bg-disabled) !important;
   color: var(--text-disabled-color) !important;
   border-color: var(--border-disabled-color) !important;
   cursor: not-allowed;
@@ -1000,6 +1001,7 @@ button.tertiary[aria-disabled=true],
 a.button.tertiary:disabled,
 a.button.tertiary.disabled,
 a.button.tertiary[aria-disabled=true] {
+  background: var(--sg-form-control-bg-disabled) !important;
   color: var(--text-disabled-color) !important;
   border-color: var(--border-disabled-color) !important;
   cursor: not-allowed;
@@ -2086,6 +2088,7 @@ a.button.tertiary.danger:focus-visible {
     overflow: hidden;
     padding: 0;
     right: 0;
+    color: var(--text-primary-color);
   }
   @media (max-width: 35.98em) {
     dialog {
@@ -2104,8 +2107,8 @@ a.button.tertiary.danger:focus-visible {
     dialog {
       padding-bottom: 0;
       border: solid var(--sg-border-width) var(--sg-border-color);
-      --border-color: var(--gds-ref-pallet-base800);
-      --sg-border-color: var(--gds-ref-pallet-base800);
+      --border-color: var(--text-primary-color);
+      --sg-border-color: var(--text-primary-color);
       border-radius: var(--sg-border-radius);
       max-height: 500px;
       box-shadow: var(--sg-popover-box-shadow);
@@ -2503,8 +2506,8 @@ var dropdown_trans_styles_default = `/**
     padding-top: 0.75rem;
     border-radius: var(--sg-border-radius);
     border: solid var(--sg-border-width) var(--sg-border-color);
-    --border-color: var(--gds-ref-pallet-base600);
-    --sg-border-color: var(--gds-ref-pallet-base600);
+    --border-color: var(--grey-800);
+    --sg-border-color: var(--grey-800);
     background: var(--sg-form-control-bg);
     color: var(--text-primary-color);
     min-height: 2.75rem;
@@ -2576,6 +2579,7 @@ var dropdown_trans_styles_default = `/**
     border-color: rgb(0, 122, 199);
   }
   button:disabled, button.disabled, button[aria-disabled=true] {
+    background: var(--sg-form-control-bg-disabled) !important;
     color: var(--text-disabled-color) !important;
     border-color: var(--border-disabled-color) !important;
     cursor: not-allowed;
@@ -2598,11 +2602,11 @@ var dropdown_trans_styles_default = `/**
     }
   }
   button:not(:disabled, .disabled, [aria-disabled]):hover {
-    --background: var(--gds-ref-pallet-base200);
-    --color: var(--gds-ref-pallet-base800);
-    background-color: var(--gds-ref-pallet-base200);
-    color: var(--gds-ref-pallet-base800);
-    border-color: var(--gds-ref-pallet-base800);
+    --background: var(--grey-400);
+    --color: var(--grey-1000);
+    background-color: var(--grey-400);
+    color: var(--grey-1000);
+    border-color: var(--grey-1000);
   }
   button > span {
     white-space: nowrap;
@@ -2612,8 +2616,8 @@ var dropdown_trans_styles_default = `/**
   button::after {
     margin-left: 0.5rem;
     margin-right: 0.5rem;
-    border-bottom: solid 2px var(--gds-ref-pallet-base800);
-    border-left: solid 2px var(--gds-ref-pallet-base800);
+    border-bottom: solid 2px var(--text-primary-color);
+    border-left: solid 2px var(--text-primary-color);
     content: "";
     display: block;
     height: 0.5rem;
@@ -2634,7 +2638,7 @@ var dropdown_trans_styles_default = `/**
     font-size: 0.875rem;
   }
   button:hover {
-    background: var(--gds-ref-pallet-base300);
+    background: var(--grey-400);
   }
   label {
     display: block;
@@ -2913,11 +2917,11 @@ var calendar_trans_styles_default = `/* stylelint-disable max-nesting-depth */
     :host table tbody tr td.today {
       background: transparent;
       border-radius: 4px;
-      color: var(--gds-ref-pallet-base800);
-      box-shadow: inset 0 0 0 2px var(--gds-ref-pallet-base800);
+      color: var(--grey-1000);
+      box-shadow: inset 0 0 0 2px var(--grey-1000);
     }
     :host table tbody tr td:hover:not(.disabled) {
-      background: var(--gds-ref-pallet-base300);
+      background: var(--grey-500);
       border: solid 1px var(--sg-bg-level-2);
       border-radius: 4px;
       color: var(--gds-sys-color-font);
@@ -2941,7 +2945,7 @@ var calendar_trans_styles_default = `/* stylelint-disable max-nesting-depth */
       z-index: 0;
     }
     :host table tbody tr td[aria-selected=true] {
-      background: var(--gds-ref-pallet-base800);
+      background: var(--grey-1000);
       border: solid 1px var(--sg-bg-level-2);
       border-radius: 4px;
       color: hsl(var(--sg-hsl-white));
@@ -2950,7 +2954,7 @@ var calendar_trans_styles_default = `/* stylelint-disable max-nesting-depth */
       border-radius: 4px;
     }
     :host table tbody tr td:hover:active:not(.disabled) {
-      background: var(--gds-ref-pallet-base800);
+      background: var(--grey-1000);
       border: solid 1px var(--sg-bg-level-2);
       border-radius: 4px;
       color: hsl(var(--sg-hsl-white));
@@ -3098,7 +3102,7 @@ i.sg-icon.sg-icon-ellipsis::before {
     cursor: text;
   }
   .field:hover {
-    background-color: var(--gds-ref-pallet-base100);
+    background-color: var(--grey-200);
   }
   .field .input {
     padding-left: 1rem;
@@ -3154,6 +3158,7 @@ i.sg-icon.sg-icon-ellipsis::before {
     cursor: pointer;
     width: 2.75rem;
     background: transparent;
+    color: var(--text-primary-color);
   }
   .field button:focus:not(:focus-visible) {
     box-shadow: none;
@@ -3166,7 +3171,7 @@ i.sg-icon.sg-icon-ellipsis::before {
     outline-offset: 0.125rem;
   }
   .field button:hover {
-    background: var(--gds-ref-pallet-base300);
+    background: var(--grey-500);
   }
   .field button svg {
     width: 1rem;
@@ -3248,15 +3253,15 @@ i.sg-icon.sg-icon-ellipsis::before {
     outline-offset: 0.125rem;
   }
   .header button:hover {
-    background: var(--gds-ref-pallet-base300);
+    background: var(--grey-400);
   }
   .header button:focus-visible {
     outline-offset: 0;
   }
   .header button .icon::before {
     background: none;
-    border-bottom: 2px solid;
-    border-left: 2px solid;
+    border-bottom: 2px solid var(--grey-1000);
+    border-left: 2px solid var(--grey-1000);
     content: "";
     display: block;
     height: 8px;
@@ -3353,7 +3358,7 @@ function register7() {
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-af766e";
+var VER_SUFFIX = "-2d68d7";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var templateCache = /* @__PURE__ */ new WeakMap();
 function applyElementScoping(strings, ...values) {