@sebgroup/green-core 3.8.1 → 3.10.0

package/generated/react/index.d.ts

@@ -1,16 +1,16 @@
 export * from './alert/index.js';
-export * from './badge/index.js';
 export * from './avatar/index.js';
 export * from './blur/index.js';
+export * from './badge/index.js';
 export * from './breadcrumbs/index.js';
 export * from './button/index.js';
 export * from './calendar/index.js';
 export * from './card/index.js';
-export * from './checkbox/index.js';
 export * from './card-linked/index.js';
+export * from './checkbox/index.js';
 export * from './coachmark/index.js';
-export * from './context-menu/index.js';
 export * from './datepicker/index.js';
+export * from './context-menu/index.js';
 export * from './details/index.js';
 export * from './dialog/index.js';
 export * from './div/index.js';
@@ -18,28 +18,28 @@ export * from './divider/index.js';
 export * from './dropdown/index.js';
 export * from './fab/index.js';
 export * from './filter-chips/index.js';
-export * from './flex/index.js';
 export * from './form-summary/index.js';
+export * from './flex/index.js';
 export * from './grid/index.js';
 export * from './grouped-list/index.js';
 export * from './list-item/index.js';
-export * from './img/index.js';
 export * from './input/index.js';
+export * from './img/index.js';
 export * from './link/index.js';
 export * from './mask/index.js';
 export * from './menu-button/index.js';
 export * from './pagination/index.js';
-export * from './radio/index.js';
 export * from './backdrop/index.js';
 export * from './popover/index.js';
+export * from './radio/index.js';
 export * from './rich-text/index.js';
 export * from './segmented-control/index.js';
 export * from './select/index.js';
 export * from './signal/index.js';
 export * from './spinner/index.js';
-export * from './switch/index.js';
 export * from './table/index.js';
 export * from './text/index.js';
+export * from './switch/index.js';
 export * from './textarea/index.js';
 export * from './theme/index.js';
 export * from './video/index.js';
@@ -49,14 +49,14 @@ export * from './breadcrumb/index.js';
 export * from './checkbox-group/index.js';
 export * from './icons/icon-details/index.js';
 export * from './filter-chip/index.js';
+export * from './formatted-account/index.js';
 export * from './formatted-date/index.js';
 export * from './formatted-number/index.js';
-export * from './formatted-account/index.js';
 export * from './radio-group/index.js';
 export * from './segment/index.js';
 export * from './sensitive-account/index.js';
-export * from './sensitive-number/index.js';
 export * from './sensitive-date/index.js';
+export * from './sensitive-number/index.js';
 export * from './icons/icon-ai/index.js';
 export * from './icons/icon-airplane-up/index.js';
 export * from './icons/icon-archive/index.js';

package/generated/react/index.js

@@ -1,16 +1,16 @@
 export * from "./alert/index.js";
-export * from "./badge/index.js";
 export * from "./avatar/index.js";
 export * from "./blur/index.js";
+export * from "./badge/index.js";
 export * from "./breadcrumbs/index.js";
 export * from "./button/index.js";
 export * from "./calendar/index.js";
 export * from "./card/index.js";
-export * from "./checkbox/index.js";
 export * from "./card-linked/index.js";
+export * from "./checkbox/index.js";
 export * from "./coachmark/index.js";
-export * from "./context-menu/index.js";
 export * from "./datepicker/index.js";
+export * from "./context-menu/index.js";
 export * from "./details/index.js";
 export * from "./dialog/index.js";
 export * from "./div/index.js";
@@ -18,28 +18,28 @@ export * from "./divider/index.js";
 export * from "./dropdown/index.js";
 export * from "./fab/index.js";
 export * from "./filter-chips/index.js";
-export * from "./flex/index.js";
 export * from "./form-summary/index.js";
+export * from "./flex/index.js";
 export * from "./grid/index.js";
 export * from "./grouped-list/index.js";
 export * from "./list-item/index.js";
-export * from "./img/index.js";
 export * from "./input/index.js";
+export * from "./img/index.js";
 export * from "./link/index.js";
 export * from "./mask/index.js";
 export * from "./menu-button/index.js";
 export * from "./pagination/index.js";
-export * from "./radio/index.js";
 export * from "./backdrop/index.js";
 export * from "./popover/index.js";
+export * from "./radio/index.js";
 export * from "./rich-text/index.js";
 export * from "./segmented-control/index.js";
 export * from "./select/index.js";
 export * from "./signal/index.js";
 export * from "./spinner/index.js";
-export * from "./switch/index.js";
 export * from "./table/index.js";
 export * from "./text/index.js";
+export * from "./switch/index.js";
 export * from "./textarea/index.js";
 export * from "./theme/index.js";
 export * from "./video/index.js";
@@ -49,14 +49,14 @@ export * from "./breadcrumb/index.js";
 export * from "./checkbox-group/index.js";
 export * from "./icons/icon-details/index.js";
 export * from "./filter-chip/index.js";
+export * from "./formatted-account/index.js";
 export * from "./formatted-date/index.js";
 export * from "./formatted-number/index.js";
-export * from "./formatted-account/index.js";
 export * from "./radio-group/index.js";
 export * from "./segment/index.js";
 export * from "./sensitive-account/index.js";
-export * from "./sensitive-number/index.js";
 export * from "./sensitive-date/index.js";
+export * from "./sensitive-number/index.js";
 export * from "./icons/icon-ai/index.js";
 export * from "./icons/icon-airplane-up/index.js";
 export * from "./icons/icon-archive/index.js";

package/generated/react/table/index.d.ts

@@ -13,6 +13,8 @@ type GdsTableProps = React.ComponentProps<ReturnType<typeof getReactComponent<Gd
     onGdsTableDataError?: (event: CustomEvent<any>) => void;
     /** Fired when row selection changes. */
     onGdsTableSelection?: (event: CustomEvent<any>) => void;
+    /** Fired when row expansion changes. Detail: `{ index: number, row: T, expanded: boolean, expandedIndices: number[] }` */
+    onGdsTableExpandChange?: (event: CustomEvent<any>) => void;
 };
 export declare const GdsTable: {
     (props: GdsTableProps & {
@@ -26,7 +28,7 @@ export declare const GdsTable: {
         page?: number | undefined;
         rows?: number | undefined;
         columns?: import("../../../components/table/table.types").Column[] | undefined;
-        data?: ((request: import("../../../components/table/table.types").Request) => Promise<import("../../../components/table/table.types").Response<import("../../../components/table/table.types").Row>>) | undefined;
+        data?: ((request: import("../../../components/table/table.types").Request) => Promise<import("../../../components/table/table.types").Response<import("../../../components/table/table.types").Row<Record<string, unknown>>>>) | undefined;
         density?: import("../../../components/table/table.types").Density | undefined;
         selectable?: boolean | undefined;
         disableSelectAll?: boolean | undefined;
@@ -35,21 +37,25 @@ export declare const GdsTable: {
         searchable?: boolean | undefined;
         settings?: boolean | undefined;
         striped?: boolean | undefined;
-        actions?: import("../../../components/table/table.types").Actions | ((row: import("../../../components/table/table.types").Row, index: number) => any) | undefined;
         nocache?: boolean | undefined;
         tfoot?: import("../../../components/table/table.types").Tfoot | undefined;
         dataLoadKey?: string | undefined;
         height?: string | undefined;
-        variant?: Omit<import("../../../components/card/card.types").Variant, "brand-01" | "brand-02"> | undefined;
+        variant?: ("neutral-01" | "neutral-02" | "neutral-02-outlined") | undefined;
         connectedCallback?: (() => void) | undefined;
+        updated?: ((changedProperties: Map<string, unknown>) => void) | undefined;
         render?: (() => any) | undefined;
         clearSelection?: (() => void) | undefined;
         selectAll?: (() => void) | undefined;
         setSelection?: ((indices: number[]) => void) | undefined;
         getSelection?: (() => {
             indices: number[];
-            data: import("../../../components/table/table.types").Row[];
+            data: import("../../../components/table/table.types").Row<Record<string, unknown>>[];
         }) | undefined;
+        expandRow?: ((index: number) => Promise<boolean>) | undefined;
+        collapseRow?: ((index: number) => boolean) | undefined;
+        toggleRowExpansion?: ((index: number, rowOverride?: import("../../../components/table/table.types").Row<Record<string, unknown>> | undefined) => Promise<boolean>) | undefined;
+        getExpandedIndices?: (() => number[]) | undefined;
         readonly semanticVersion?: "__GDS_SEM_VER__" | undefined;
         syncFirstRender?: boolean | undefined;
         gdsElementName?: string | undefined;

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

package/patterns/card-pattern-01/card-pattern-01.component.d.ts

@@ -6,7 +6,8 @@ declare const GdsCardPattern01_base: (new (...args: any[]) => import("../../util
  * @element gds-card-pattern-01
  * @status beta
  *
- * @slot header - Custom header content
+ * @slot media - Custom media content rendered in the card media area (when no src image is provided).
+ * @slot header - Custom header content rendered only when neither src nor media slot content is present.
  * @slot footer - Action items (buttons, links)
  *
  */

package/patterns/card-pattern-01/card-pattern-01.component.js

@@ -3,7 +3,7 @@ import {
   __privateAdd,
   __privateMethod
 } from "../../chunks/chunk.CAV4X6PU.js";
-var _hasFooterContent, hasFooterContent_fn, _getClasses, getClasses_fn, _renderLinkedCard, renderLinkedCard_fn, _renderLinkedFooter, renderLinkedFooter_fn, _renderStaticCard, renderStaticCard_fn, _renderStaticFooter, renderStaticFooter_fn, _renderCardContent, renderCardContent_fn;
+var _hasFooterContent, hasFooterContent_fn, _getClasses, getClasses_fn, _hasMediaSlotContent, hasMediaSlotContent_fn, _renderMedia, renderMedia_fn, _renderLinkedCard, renderLinkedCard_fn, _renderLinkedFooter, renderLinkedFooter_fn, _renderStaticCard, renderStaticCard_fn, _renderStaticFooter, renderStaticFooter_fn, _renderCardContent, renderCardContent_fn;
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -42,6 +42,8 @@ let GdsCardPattern01 = class extends withSizeXProps(
      */
     __privateAdd(this, _hasFooterContent);
     __privateAdd(this, _getClasses);
+    __privateAdd(this, _hasMediaSlotContent);
+    __privateAdd(this, _renderMedia);
     /**
      * Renders linked version of the card
      * Includes href, target, and rel attributes
@@ -65,7 +67,7 @@ let GdsCardPattern01 = class extends withSizeXProps(
     /**
      * Renders card content structure
      * Includes media, header slot, title/excerpt, and footer
-     * Header slot only shows when no media is present
+     * Header slot only shows when no image media is present
      */
     __privateAdd(this, _renderCardContent);
     this.title = "";
@@ -100,6 +102,46 @@ getClasses_fn = function(type) {
     [`ratio-${this.ratio}`]: true
   });
 };
+_hasMediaSlotContent = new WeakSet();
+hasMediaSlotContent_fn = function() {
+  return !!this.querySelector('[slot="media"]');
+};
+_renderMedia = new WeakSet();
+renderMedia_fn = function() {
+  if (this.src) {
+    return html`
+        <gds-flex padding="xs xs 0 xs">
+          <gds-img
+            src=${ifDefined(this.src)}
+            srcset=${ifDefined(this.srcset)}
+            sizes=${ifDefined(this.sizes)}
+            width="100%"
+            height="100%"
+            object-fit="cover"
+            object-position="center"
+            border-radius="xs"
+            aspect-ratio=${this.ratio === "square" ? "1/1" : "16/9"}
+            loading=${ifDefined(this.loading)}
+            decoding=${ifDefined(this.decoding)}
+            alt=${ifDefined(this.alt)}
+            class="card-media"
+          ></gds-img>
+        </gds-flex>
+      `;
+  }
+  if (__privateMethod(this, _hasMediaSlotContent, hasMediaSlotContent_fn).call(this)) {
+    return html`
+        <gds-flex
+          padding="xs xs 0 xs"
+          flex="1"
+          aspect-ratio=${this.ratio === "square" ? "1/1" : "16/9"}
+        >
+          <slot name="media"></slot>
+        </gds-flex>
+      `;
+  }
+  return null;
+};
 _renderLinkedCard = new WeakSet();
 renderLinkedCard_fn = function() {
   return html`
@@ -170,30 +212,12 @@ renderStaticFooter_fn = function() {
 _renderCardContent = new WeakSet();
 renderCardContent_fn = function() {
   return html`
-      ${when(
-    this.src,
-    () => html`
-          <gds-flex padding="xs xs 0 xs">
-            <gds-img
-              src=${ifDefined(this.src)}
-              srcset=${ifDefined(this.srcset)}
-              sizes=${ifDefined(this.sizes)}
-              width="100%"
-              height="100%"
-              object-fit="cover"
-              object-position="center"
-              border-radius="xs"
-              aspect-ratio=${this.ratio === "square" ? "1/1" : "16/9"}
-              loading=${ifDefined(this.loading)}
-              decoding=${ifDefined(this.decoding)}
-              alt=${ifDefined(this.alt)}
-              class="card-media"
-            ></gds-img>
-          </gds-flex>
-        `
-  )}
+      ${__privateMethod(this, _renderMedia, renderMedia_fn).call(this)}
       <gds-flex flex-direction="column" gap="xl" padding="xl">
-        ${when(!this.src, () => html`<slot name="header"></slot>`)}
+        ${when(
+    !this.src && !__privateMethod(this, _hasMediaSlotContent, hasMediaSlotContent_fn).call(this),
+    () => html`<slot name="header"></slot>`
+  )}
         ${when(
     this.title || this.excerpt,
     () => html`

package/shared-styles/rbcb-toggle.style.js

@@ -42,7 +42,7 @@ var rbcb_toggle_style_default = css`
     border-radius: var(--_toggle-radius);
     box-shadow: inset 0 0 0 var(--gds-sys-space-5xs)
       var(--gds-sys-color-border-neutral-01);
-    background-color: transparent;
+    background-color: var(--gds-sys-color-l1-neutral-01);
     box-sizing: border-box;
     transition-property: box-shadow, background-color;
     transition-duration: var(--gds-sys-motion-duration-fastest);

package/utils/helpers/custom-element-scoping.js

@@ -1,6 +1,6 @@
 import "../../chunks/chunk.CAV4X6PU.js";
 import { html as litHtml } from "lit";
-const VER_SUFFIX = "-40b7b5";
+const VER_SUFFIX = "-15bd72";
 class ScopedElementRegistry {
   static get instance() {
     if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])