@sebgroup/green-core 2.28.1 → 2.28.2

package/components/calendar/calendar.component.js

@@ -148,7 +148,7 @@ let GdsCalendar = class extends GdsElement {
           );
           const isOutsideMinMax = (day < this.min || day > this.max) && !isSameDay(day, this.min) && !isSameDay(day, this.max);
           const isWeekend = day.getDay() === 0 || day.getDay() === 6;
-          const isDisabled = displayOptions.disabled || isOutsideCurrentMonth || isOutsideMinMax || this.disabledWeekends && isWeekend;
+          const isDisabled = displayOptions.disabled || isOutsideMinMax || this.disabledWeekends && isWeekend;
           const shouldRenderBlank = this.hideExtraneousDays && isOutsideCurrentMonth;
           return shouldRenderBlank ? html`<td inert></td>` : html`
                           <td
@@ -159,7 +159,8 @@ let GdsCalendar = class extends GdsElement {
             small: Boolean(this.size === "small"),
             "custom-date": Boolean(customization),
             disabled: Boolean(isDisabled),
-            today: isSameDay(currentDate, day)
+            today: isSameDay(currentDate, day),
+            "outside-month": isOutsideCurrentMonth
           })}"
                             ?disabled=${isDisabled}
                             tabindex="${isSameDay(this.focusedDate, day) ? 0 : -1}"

package/components/calendar/calendar.styles.js

@@ -136,6 +136,10 @@ const style = css`
         cursor: default;
       }
 
+      &.outside-month:not(.disabled) {
+        color: var(--gds-sys-color-content-neutral-02);
+      }
+
       &[aria-selected='false']:active:not(.disabled) {
         background: color-mix(
           in srgb,

package/components/dropdown/dropdown.component.js

@@ -446,6 +446,7 @@ let Dropdown = class extends GdsFormControlElement {
       this.options[0] && (this.options[0].selected = true);
       this.value = this.options[0]?.value;
     }
+    this._handleValueChange();
   }
   _handleValueChange() {
     this._elListbox.then((listbox) => {

package/components/table/table.component.js

@@ -498,11 +498,16 @@ renderColumnHeader_fn = function(column) {
     "sort-asc": isSorted && sortDirection === "asc",
     "sort-desc": isSorted && sortDirection === "desc",
     [`align-${column.align}`]: !!column.align,
-    [`justify-${column.justify}`]: !!column.justify
+    [`justify-${column.justify}`]: !!column.justify,
+    wrap: Boolean(column.width)
+  });
+  const style = styleMap({
+    "--cell-width": column.width
   });
   return html`
       <th
         class=${classes}
+        style=${style}
         aria-sort="${isSorted ? sortDirection === "asc" ? "ascending" : "descending" : "none"}"
         @click=${column.sortable ? () => __privateMethod(this, _GdsTable_instances, handleSort_fn).call(this, column.key) : null}
       >
@@ -740,7 +745,7 @@ renderTable_fn = function() {
     loading: this._loading,
     loaded: !this._loading && !this._loaded
   });
-  const caption = `${this.summary}, ${msg("Data table with")} ${this._total} ${msg("rows")}`;
+  const caption = `${this.summary ? this.summary + ", " : ""}${msg("Data table with")} ${this._total} ${msg("rows")}`;
   return html`
       <gds-card
         variant="${this.variant}"

package/components/table/table.stories.data.js

@@ -109,6 +109,7 @@ const Users = {
       key: "status",
       label: "Status",
       sortable: true,
+      justify: "end",
       cell: {
         value: {
           type: "badge",

package/components/table/table.styles.js

@@ -316,8 +316,9 @@ const TableStyles = css`
     overflow-wrap: break-word;
   }
 
-  td.wrap {
-    max-width: var(--cell-width);
+  td.wrap,
+  th.wrap {
+    width: var(--cell-width);
   }
 
   /* Justify utilities */
@@ -342,6 +343,11 @@ const TableStyles = css`
     justify-content: flex-end;
   }
 
+  .justify-end:not(.sortable) .column-header {
+    text-align: right;
+    justify-content: flex-end;
+  }
+
   .sortable.justify-end .column-header {
     flex-direction: row-reverse;
   }
@@ -591,13 +597,14 @@ const TableStyles = css`
     width: 60%;
   }
 
-  /* Visually hidden */
+  /* Visually hidden - screen reader only without layout impact */
   .visually-hidden {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-    pointer-events: none;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    overflow: hidden;
+    white-space: nowrap;
+    height: 0px;
+    width: 0px;
   }
 
   /* Scroll driven animation */