@sebgroup/green-core 2.6.1 → 2.6.2

package/components/button/button.component.d.ts

@@ -27,7 +27,7 @@ declare class Button extends GdsFormControlElement<any> {
      */
     variant: 'brand' | 'neutral' | 'positive' | 'negative' | 'notice' | 'warning';
     /**
-     * Sets the size of the button. Defaults to "small".
+     * Sets the size of the button. Defaults to "medium".
      */
     size: 'xs' | 'small' | 'medium' | 'large';
     /**

package/components/button/button.styles.js

@@ -142,8 +142,8 @@ const style = css`
 
   @layer sizes {
     :host([size='xs']) .button {
-      --_block-size: var(--gds-sys-space-l);
-      gap: var(--gds-sys-space-4xs);
+      --_block-size: var(--gds-sys-space-xl);
+      gap: var(--gds-sys-space-3xs);
       font: var(--gds-sys-text-detail-book-xs);
       padding-inline: var(--gds-sys-space-s);
     }

package/components/grid/grid.component.d.ts

@@ -8,30 +8,15 @@ import { GdsDiv } from '../div/div.component';
 export declare class GdsGrid extends GdsDiv {
     static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     /**
-     * The number of columns for the grid. This can be a single value that applies to all breakpoints, or a string of three space-separated tokens in the format "l:desktop m:tablet s:mobile", each token specifying the number of columns for that device type respectively.
-     * @example
-     * ```html
-     * <gds-grid columns="2"></gds-grid> <!-- applies to all breakpoints -->
-     * <gds-grid columns="l{8} m{4} s{2}"></gds-grid> <!-- different values for each breakpoint -->
-     * ```
+     * The number of columns to divide the space into. Accepts a unitless number. Example: `1; m { 2 }; l { 4 }` to vary number of columns based on viewport size.
      */
     columns?: string;
     /**
-     * Defines the gap size between grid items. Accepts a single value for all breakpoints or a "l:desktop m:tablet s:mobile" format. Sizes can be 'none', 'xs', 's', 'm', 'l', 'xl', '2xl', '3xl'.
-     * @example
-     * ```html
-     * <gds-grid gap="m"></gds-grid> <!-- applies to all breakpoints -->
-     * <gds-grid gap="l{m} m{s} s{xs}"></gds-grid> <!-- different values for each breakpoint -->
-     * ```
+     * Defines the gap size between grid items. Uses same format as the CSS gap property, and expects space tokens. This can be a single value that applies to all breakpoints, or a string of three space-separated tokens in the format "l:desktop m:tablet s:mobile", each token specifying the gap size for that device type respectively.
      */
     gap?: string;
     /**
-     * Defines the minimum column width. If set, the grid adjusts column size based on content and available width, even without other attributes.
-     * @example
-     * ```html
-     * <gds-grid auto-columns="200px"></gds-grid> <!-- applies to all breakpoints -->
-     * <gds-grid auto-columns="l{200px} m{100px} s{80px}"></gds-grid> <!-- different values for each breakpoint -->
-     * ```
+     * Defines the minimum column width. If set, the grid adjusts column size based on content and available width, even without other attributes. Accepts any valid CSS units.
      */
     'auto-columns'?: string;
     render(): any;

package/components/index.d.ts

@@ -3,6 +3,7 @@ export * from '../primitives/menu/menu-heading';
 export * from '../primitives/menu/menu-item';
 export * from './alert';
 export * from './badge';
+export * from './blur';
 export * from './breadcrumbs';
 export * from './button';
 export * from './card/card';

package/components/index.js

@@ -3,6 +3,7 @@ export * from "../primitives/menu/menu-heading.js";
 export * from "../primitives/menu/menu-item.js";
 export * from "./alert/index.js";
 export * from "./badge/index.js";
+export * from "./blur/index.js";
 export * from "./breadcrumbs/index.js";
 export * from "./button/index.js";
 export * from "./card/card.js";

package/components/pure.d.ts

@@ -1,9 +1,12 @@
 export * from '../primitives/listbox/option.component';
 export * from '../primitives/menu/menu-heading.component';
 export * from '../primitives/menu/menu-item.component';
+export * from './alert/alert.component';
 export * from './badge/badge.component';
+export * from './blur/blur.component';
 export * from './breadcrumbs/breadcrumbs.component';
 export * from './button/button.component';
+export * from './calendar/calendar.component';
 export * from './card/card.component';
 export * from './checkbox/checkbox-group/checkbox-group.component';
 export * from './checkbox/checkbox.component';
@@ -14,6 +17,7 @@ export * from './dialog/dialog.component';
 export * from './div/div.component';
 export * from './divider/divider.component';
 export * from './dropdown/dropdown.component';
+export * from './fab/fab.component';
 export * from './filter-chips/filter-chips.component';
 export * from './flex/flex.component';
 export * from './form-summary/summary.component';
@@ -29,7 +33,11 @@ export * from './menu-button/menu-button.component';
 export * from './popover/popover.component';
 export * from './radio/radio-group/radio-group.component';
 export * from './radio/radio.component';
+export * from './rich-text/rich-text.component';
 export * from './segmented-control/segmented-control.component';
+export * from './sensitive/number/sensitive-number.component';
+export * from './sensitive/date/sensitive-date.component';
+export * from './sensitive/account/sensitive-account.component';
 export * from './select/select.component';
 export * from './signal/signal.component';
 export * from './spinner/spinner.component';

package/components/pure.js

@@ -1,9 +1,12 @@
 export * from "../primitives/listbox/option.component.js";
 export * from "../primitives/menu/menu-heading.component.js";
 export * from "../primitives/menu/menu-item.component.js";
+export * from "./alert/alert.component.js";
 export * from "./badge/badge.component.js";
+export * from "./blur/blur.component.js";
 export * from "./breadcrumbs/breadcrumbs.component.js";
 export * from "./button/button.component.js";
+export * from "./calendar/calendar.component.js";
 export * from "./card/card.component.js";
 export * from "./checkbox/checkbox-group/checkbox-group.component.js";
 export * from "./checkbox/checkbox.component.js";
@@ -14,6 +17,7 @@ export * from "./dialog/dialog.component.js";
 export * from "./div/div.component.js";
 export * from "./divider/divider.component.js";
 export * from "./dropdown/dropdown.component.js";
+export * from "./fab/fab.component.js";
 export * from "./filter-chips/filter-chips.component.js";
 export * from "./flex/flex.component.js";
 export * from "./form-summary/summary.component.js";
@@ -29,7 +33,11 @@ export * from "./menu-button/menu-button.component.js";
 export * from "./popover/popover.component.js";
 export * from "./radio/radio-group/radio-group.component.js";
 export * from "./radio/radio.component.js";
+export * from "./rich-text/rich-text.component.js";
 export * from "./segmented-control/segmented-control.component.js";
+export * from "./sensitive/number/sensitive-number.component.js";
+export * from "./sensitive/date/sensitive-date.component.js";
+export * from "./sensitive/account/sensitive-account.component.js";
 export * from "./select/select.component.js";
 export * from "./signal/signal.component.js";
 export * from "./spinner/spinner.component.js";

package/components/sensitive/index.d.ts

@@ -1 +1,3 @@
 export * from './number';
+export * from './date';
+export * from './account';

package/components/sensitive/index.js

@@ -1 +1,3 @@
 export * from "./number/index.js";
+export * from "./date/index.js";
+export * from "./account/index.js";

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.1";
+    this.semanticVersion = "2.6.2";
     this._isUsingTransitionalStyles = false;
     this._dynamicStylesController = new DynamicStylesController(this);
   }

package/generated/react/index.d.ts

@@ -31,8 +31,8 @@ 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 './segmented-control/index.js';
 export * from './signal/index.js';
 export * from './spinner/index.js';
 export * from './text/index.js';
@@ -49,11 +49,6 @@ 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 './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 './icons/icon-ai/index.js';
 export * from './icons/icon-airplane-up/index.js';
 export * from './icons/icon-archive/index.js';
@@ -379,3 +374,8 @@ export * from './icons/icon-youtube/index.js';
 export * from './icons/icon-zap/index.js';
 export * from './icons/icon-zoom-in/index.js';
 export * from './icons/icon-zoom-out/index.js';
+export * from './radio-group/index.js';
+export * from './segment/index.js';
+export * from './sensitive-account/index.js';
+export * from './sensitive-date/index.js';
+export * from './sensitive-number/index.js';

package/generated/react/index.js

@@ -31,8 +31,8 @@ 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 "./segmented-control/index.js";
 export * from "./signal/index.js";
 export * from "./spinner/index.js";
 export * from "./text/index.js";
@@ -49,11 +49,6 @@ 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 "./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 "./icons/icon-ai/index.js";
 export * from "./icons/icon-airplane-up/index.js";
 export * from "./icons/icon-archive/index.js";
@@ -379,3 +374,8 @@ export * from "./icons/icon-youtube/index.js";
 export * from "./icons/icon-zap/index.js";
 export * from "./icons/icon-zoom-in/index.js";
 export * from "./icons/icon-zoom-out/index.js";
+export * from "./radio-group/index.js";
+export * from "./segment/index.js";
+export * from "./sensitive-account/index.js";
+export * from "./sensitive-date/index.js";
+export * from "./sensitive-number/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.1",
+  "version": "2.6.2",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

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 = "-d206eb";
+const VER_SUFFIX = "-258a9b";
 class ScopedElementRegistry {
   static get instance() {
     if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])

package/utils/helpers/style-expression-parser-tester.js

@@ -1,10 +1,14 @@
 import { inspect } from "util";
 import { parse, toCss, tokenize } from "./style-expression-parser.js";
-const expression = "block; hover:flex; xl { focus:block; flex }";
-const ast = parse(tokenize(expression));
-const css = toCss(":host", "background", ast);
-console.log(
-  "AST",
-  inspect(ast, { showHidden: false, depth: null, colors: true })
-);
-console.log(inspect(css, { showHidden: false, depth: null, colors: true }));
+const inspectConfig = { showHidden: false, depth: null, colors: true };
+const expression = "s; m { l }";
+const tokenArray = tokenize(expression);
+const ast = parse(tokenArray);
+const css = toCss(":host", "padding", ast, (v) => `var(--gds-sys-space-${v})`);
+console.log("---- TOKENS ----");
+console.log(inspect(tokenArray, inspectConfig));
+console.log("---- AST ----");
+console.log(inspect(ast, inspectConfig));
+console.log("---- CSS ----");
+console.log(inspect(css, inspectConfig));
+console.log("-------------");