@sebgroup/green-core 2.6.3 → 2.6.4

package/components/fab/fab.component.d.ts

@@ -1,4 +1,4 @@
-import { GdsButton } from '../button';
+import { GdsButton } from '../button/button.component';
 declare const GdsFab_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").PositioningProps) & typeof GdsButton;
 /**
  * @element gds-fab

package/components/fab/fab.component.js

@@ -3,7 +3,7 @@ import {
 } from "../../chunks/chunk.QU3DSPNU.js";
 import { gdsCustomElement } from "../../scoping.js";
 import { withPositioningProps } from "../../utils/mixins/declarative-layout-mixins.js";
-import { GdsButton } from "../button/index.js";
+import { GdsButton } from "../button/button.component.js";
 import FABStyles from "./fab.styles.js";
 let GdsFab = class extends withPositioningProps(GdsButton) {
   connectedCallback() {

package/components/fab/fab.styles.js

@@ -12,6 +12,10 @@ const style = css`
     block-size: calc(var(--_block-size) + var(--gds-sys-space-xs));
     width: max-content;
   }
+
+  ::slotted([gds-element='gds-signal']) {
+    margin-left: var(--gds-sys-space-xs);
+  }
 `;
 var fab_styles_default = style;
 export {

package/components/grid/grid.component.js

@@ -33,6 +33,7 @@ __decorateClass([
 ], GdsGrid.prototype, "gap", 2);
 __decorateClass([
   styleExpressionProperty({
+    reflect: true,
     property: "--_col-width",
     valueTemplate: (v) => `${isNaN(v) ? v : `${v}px`}`
   })

package/gds-element.js

@@ -14,7 +14,7 @@ class GdsElement extends LitElement {
     /**
      * The semantic version of this element. Can be used for troubleshooting to verify the version being used.
      */
-    this.semanticVersion = "2.6.3";
+    this.semanticVersion = "2.6.4";
     this._isUsingTransitionalStyles = false;
     this._dynamicStylesController = new DynamicStylesController(this);
   }

package/generated/react/index.d.ts

@@ -52,8 +52,8 @@ export * from './formatted-number/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

@@ -52,8 +52,8 @@ export * from "./formatted-number/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/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": "2.6.3",
+  "version": "2.6.4",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/utils/decorators/style-expression-property.d.ts

@@ -23,6 +23,10 @@ export type StyleExpressionPropertyOptions = {
      * components with different style or value templates.
      */
     cacheOverrideKey?: string;
+    /**
+     * If true, mirror the property value to a DOM attribute (for CSS selectors).
+     */
+    reflect?: boolean;
 };
 /**
  * A decorator that can be used to create a Style Expression Property.

package/utils/decorators/style-expression-property.js

@@ -9,17 +9,26 @@ function styleExpressionProperty(options) {
     const valueTemplate = options?.valueTemplate;
     const styleTemplate = options?.styleTemplate;
     const cacheKey = options?.cacheOverrideKey ?? `0`;
-    property({ attribute: options?.attribute, noAccessor: true })(
-      proto,
-      descriptor
-    );
+    const attributeName = options?.attribute ?? String(descriptor);
+    property({
+      attribute: attributeName,
+      reflect: options?.reflect,
+      noAccessor: true
+    })(proto, descriptor);
     Object.defineProperty(proto, descriptor, {
       get: function() {
         return this["__" + String(descriptor)];
       },
       set: async function(newValue) {
-        if (!newValue) return;
+        newValue = newValue?.toString().trim() ?? "";
         this["__" + String(descriptor)] = newValue;
+        if (options?.reflect) {
+          if (!newValue) {
+            this.removeAttribute(attributeName);
+          } else {
+            this.setAttribute(attributeName, String(newValue));
+          }
+        }
         await this.updateComplete;
         const sel = options?.selector ?? this.constructor.styleExpressionBaseSelector;
         const lvl = this.level ?? "0";

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

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