@sebgroup/green-core 2.19.0 → 2.20.0-rc.20251215154321804

package/components/badge/badge.component.d.ts

@@ -4,36 +4,13 @@ declare const GdsBadge_base: (new (...args: any[]) => import("../../utils/mixins
  * `gds-badge`
  *
  * @element gds-badge
- *
  */
 export declare class GdsBadge extends GdsBadge_base {
     #private;
     static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
-    /**
-     * Controls the variant of the badge.
-     * Supports all valid variants like information, notice, positive, warning, negative.
-     * @property variant
-     */
     variant: 'information' | 'notice' | 'positive' | 'warning' | 'negative' | 'disabled';
-    /**
-     * Defines the size of the badge.
-     * The default value is `default`.
-     *
-     * @property {string} size - The size of the badge, which can be either 'default' or 'small'.
-     */
     size: 'default' | 'small';
-    /**
-     * Indicates whether the badge is in notification mode.
-     * When set to `true`, the badge will act as a notification badge with only two variants: `positive` or `negative`.
-     *
-     * @property {boolean} notification - Controls the notification mode of the badge.
-     */
     notification: boolean;
-    /**
-     * Indicates whether the badge is rounded.
-     *
-     * @property {boolean} rounded - Controls the border radius of the badge.
-     */
     rounded: boolean;
     mainSlotOccupied: boolean;
     leadSlotOccupied: boolean;

package/components/badge/badge.component.js

@@ -5,6 +5,7 @@ import {
 } from "../../chunks/chunk.QU3DSPNU.js";
 var _GdsBadge_instances, handleSlotChange_fn, renderLeadSlot_fn, renderMainSlot_fn, renderTrailSlot_fn;
 import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 import { GdsElement } from "../../gds-element.js";
 import { html } from "../../scoping.js";
 import { tokens } from "../../tokens.style.js";
@@ -30,111 +31,23 @@ let GdsBadge = class extends withSizeXProps(
     this.leadSlotOccupied = false;
   }
   render() {
-    let background;
-    let color;
-    if (this.notification) {
-      background = "negative-01";
-      color = "inversed";
-    } else {
-      switch (this.variant) {
-        case "information":
-          background = "information-03";
-          color = "information-01";
-          break;
-        case "notice":
-          background = "notice-03";
-          color = "notice-01";
-          break;
-        case "positive":
-          background = "positive-03";
-          color = "positive-03";
-          break;
-        case "warning":
-          background = "warning-03";
-          color = "warning-01";
-          break;
-        case "negative":
-          background = "negative-03";
-          color = "negative-01";
-          break;
-        case "disabled":
-          background = "disabled-03";
-          color = "disabled-01";
-          break;
-        default:
-          background = "information-03";
-          color = "information-01";
-          break;
-      }
-    }
-    const padding = (() => {
-      const paddings = {
-        notification: {
-          occupied: "4xs 2xs",
-          default: "3xs"
-        },
-        small: {
-          occupied: "4xs 3xs",
-          default: "4xs 3xs"
-        },
-        default: {
-          occupied: "3xs xs 3xs 2xs",
-          default: "4xs xs"
-        }
-      };
-      if (this.notification) {
-        return paddings.notification[this.mainSlotOccupied ? "occupied" : "default"];
-      }
-      const isSmall = this.size === "small";
-      return paddings[isSmall ? "small" : "default"][this.leadSlotOccupied ? "occupied" : "default"];
-    })();
-    const blockSize = (() => {
-      const sizes = {
-        occupied: {
-          small: "m",
-          default: "l"
-        },
-        default: "xs"
-      };
-      return this.mainSlotOccupied ? sizes.occupied[this.size === "small" || this.notification ? "small" : "default"] : sizes.default;
-    })();
-    const inlineSize = (() => {
-      const sizes = {
-        notification: {
-          occupied: "l",
-          default: "0"
-        },
-        default: "l"
-      };
-      return this.notification ? sizes.notification[this.mainSlotOccupied ? "occupied" : "default"] : sizes.default;
-    })();
-    const borderRadius = (() => {
-      const radiuses = {
-        small: "3xs",
-        notification: "max",
-        default: "2xs"
-      };
-      if (this.rounded) return "max";
-      if (this.notification) return radiuses.notification;
-      return this.size === "small" ? radiuses.small : radiuses.default;
-    })();
-    return html`<gds-flex
-      level="3"
-      background=${background}
-      color=${color}
-      gap="${this.notification ? "" : "3xs"}"
-      align-items="center"
-      justify-content="${this.notification ? "center" : "flex-start"}"
-      padding="${padding}"
-      min-height="${blockSize}"
-      border-radius="${borderRadius}"
-      width="100%"
-      min-width="${inlineSize}"
-      font="${this.size === "small" || this.notification ? "detail-book-xs" : "detail-book-s"}"
-    >
-      ${__privateMethod(this, _GdsBadge_instances, renderLeadSlot_fn).call(this)} ${__privateMethod(this, _GdsBadge_instances, renderMainSlot_fn).call(this)}
-      ${__privateMethod(this, _GdsBadge_instances, renderTrailSlot_fn).call(this)}
-    </gds-flex>`;
+    const classes = classMap({
+      badge: true,
+      [this.variant]: true,
+      [this.size]: this.size === "small",
+      notification: this.notification,
+      "with-content": this.notification && this.mainSlotOccupied,
+      rounded: this.rounded
+    });
+    return html`
+      <div class="${classes}">
+        ${[
+      __privateMethod(this, _GdsBadge_instances, renderLeadSlot_fn).call(this),
+      __privateMethod(this, _GdsBadge_instances, renderMainSlot_fn).call(this),
+      __privateMethod(this, _GdsBadge_instances, renderTrailSlot_fn).call(this)
+    ]}
+      </div>
+    `;
   }
 };
 _GdsBadge_instances = new WeakSet();

package/components/badge/badge.styles.js

@@ -1,8 +1,102 @@
 import "../../chunks/chunk.QU3DSPNU.js";
 import { css } from "lit";
 const style = css`
-  :host {
-    display: inline-block;
+  @layer tokens, core, variants, sizes, states, notification;
+
+  @layer core {
+    :host {
+      display: inline-block;
+    }
+
+    .badge {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: var(--gds-sys-space-3xs);
+      padding: var(--_padding);
+      min-height: var(--_block-size);
+      border-radius: var(--_border-radius);
+      width: 100%;
+      min-width: var(--_inline-size);
+      font: var(--_font);
+      background-color: var(--_bg);
+      color: var(--_color);
+      box-sizing: border-box;
+
+      --_padding: var(--gds-sys-space-4xs) var(--gds-sys-space-xs);
+      --_block-size: var(--gds-sys-space-xs);
+      --_border-radius: var(--gds-sys-space-2xs);
+      --_inline-size: var(--gds-sys-space-l);
+      --_font: var(--gds-sys-text-detail-book-s);
+    }
+  }
+
+  @layer variants {
+    .badge.information {
+      --_bg: var(--gds-sys-color-l3-information-03);
+      --_color: var(--gds-sys-color-content-information-01);
+    }
+
+    .badge.notice {
+      --_bg: var(--gds-sys-color-l3-notice-03);
+      --_color: var(--gds-sys-color-content-notice-01);
+    }
+
+    .badge.positive {
+      --_bg: var(--gds-sys-color-l3-positive-03);
+      --_color: var(--gds-sys-color-content-positive-03);
+    }
+
+    .badge.warning {
+      --_bg: var(--gds-sys-color-l3-warning-03);
+      --_color: var(--gds-sys-color-content-warning-01);
+    }
+
+    .badge.negative {
+      --_bg: var(--gds-sys-color-l3-negative-03);
+      --_color: var(--gds-sys-color-content-negative-01);
+    }
+
+    .badge.disabled {
+      --_bg: var(--gds-sys-color-l3-disabled-03);
+      --_color: var(--gds-sys-color-content-disabled-01);
+    }
+  }
+
+  @layer sizes {
+    .badge.small {
+      --_padding: var(--gds-sys-space-4xs) var(--gds-sys-space-2xs);
+      --_block-size: var(--gds-sys-space-m);
+      --_border-radius: var(--gds-sys-space-3xs);
+      --_font: var(--gds-sys-text-detail-book-xs);
+    }
+  }
+
+  @layer notification {
+    .badge.notification {
+      --_padding: var(--gds-sys-space-3xs);
+      --_block-size: var(--gds-sys-space-xs);
+      --_border-radius: var(--gds-sys-space-max);
+      --_inline-size: 0;
+      justify-content: center;
+      gap: 0;
+      --_bg: var(--gds-sys-color-l3-negative-01);
+      --_color: var(--gds-sys-color-content-inversed);
+      --_font: var(--gds-sys-text-detail-book-xs);
+    }
+
+    .badge.notification.with-content {
+      --_padding: var(--gds-sys-space-4xs) var(--gds-sys-space-2xs);
+      --_block-size: var(--gds-sys-space-m);
+      --_inline-size: var(--gds-sys-space-l);
+    }
+  }
+
+  @layer states {
+    .badge.rounded {
+      --_border-radius: var(--gds-sys-space-max);
+      justify-content: center;
+    }
   }
 
   slot[name='lead']::slotted(*) {

package/components/checkbox/checkbox.component.js

@@ -42,39 +42,41 @@ let GdsCheckbox = class extends GdsFormControlElement {
   }
   render() {
     return html`
-      <input
-        type="checkbox"
-        ?checked=${this.checked}
-        ?disabled=${this.disabled}
-        ?indeterminate=${this.indeterminate}
-        aria-invalid=${this.invalid}
-        aria-describedby="message supporting-text"
-        id="checkbox-input"
-        @change=${() => {
+        <input
+          type="checkbox"
+          class="visually-hidden-checkbox"
+          ?checked=${this.checked}
+          ?disabled=${this.disabled}
+          ?indeterminate=${this.indeterminate}
+          aria-invalid=${this.invalid}
+          aria-describedby="message supporting-text"
+          id="checkbox-input"
+          @change=${() => {
       this.checked = this._elCheckbox.checked;
       __privateMethod(this, _GdsCheckbox_instances, dispatchChangeEvents_fn).call(this);
     }}
-      />
-      ${when(
+        />
+        ${when(
       this.errorMessage,
       () => html`<span id="message">${this.errorMessage}</span>`
     )}
-      <gds-toggle-control-base type="checkbox" @click=${__privateMethod(this, _GdsCheckbox_instances, toggleChecked_fn)}>
-        <label for="checkbox-input" slot="label"> ${this.label} </label>
-        <span
-          slot="supporting-text"
-          class="supporting-text"
-          id="supporting-text"
-        >
-          ${this.supportingText}
-        </span>
-        ${checkboxToggle({
+        <gds-toggle-control-base type="checkbox" @click=${__privateMethod(this, _GdsCheckbox_instances, toggleChecked_fn)}>
+          <label for="checkbox-input" slot="label"> ${this.label} </label>
+          <span
+            slot="supporting-text"
+            class="supporting-text"
+            id="supporting-text"
+          >
+            ${this.supportingText}
+          </span>
+          ${checkboxToggle({
       checked: this.checked,
       indeterminate: this.indeterminate,
       disabled: this.disabled,
       invalid: this.invalid
     })}
-      </gds-toggle-control-base>
+        </gds-toggle-control-base>
+      </div>
     `;
   }
   _getValidityAnchor() {

package/components/checkbox/checkbox.styles.js

@@ -18,14 +18,6 @@ const style = css`
     outline: none;
   }
 
-  input[type='checkbox'] {
-    position: absolute;
-    opacity: 0;
-    width: 0;
-    height: 0;
-    pointer-events: none;
-  }
-
   #message {
     display: none;
   }

package/components/dropdown/dropdown.component.js

@@ -381,7 +381,10 @@ let Dropdown = class extends GdsFormControlElement {
       !this.combobox || this.multiple,
       () => __privateGet(this, _renderTriggerButton).call(this)
     )}
-          <gds-icon-chevron-bottom slot="action"></gds-icon-chevron-bottom>
+          <gds-icon-chevron-bottom
+            size=${this.size === "small" ? "m" : "l"}
+            slot="action"
+          ></gds-icon-chevron-bottom>
         </gds-field-base>
 
         ${when(

package/components/index.d.ts

@@ -29,6 +29,7 @@ export * from './input';
 export * from './link';
 export * from './mask';
 export * from './menu-button';
+export * from './pagination';
 export * from './popover';
 export * from './radio';
 export * from './rich-text';
@@ -37,6 +38,7 @@ export * from './select';
 export * from './signal';
 export * from './spinner';
 export * from './text';
+export * from './table';
 export * from './textarea';
 export * from './theme';
 export * from './video';

package/components/index.js

@@ -29,6 +29,7 @@ export * from "./input/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 "./popover/index.js";
 export * from "./radio/index.js";
 export * from "./rich-text/index.js";
@@ -37,6 +38,7 @@ export * from "./select/index.js";
 export * from "./signal/index.js";
 export * from "./spinner/index.js";
 export * from "./text/index.js";
+export * from "./table/index.js";
 export * from "./textarea/index.js";
 export * from "./theme/index.js";
 export * from "./video/index.js";

package/components/input/input.styles.js

@@ -1,6 +1,15 @@
 import "../../chunks/chunk.QU3DSPNU.js";
 import { css } from "lit";
-const style = css``;
+const style = css`
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: var(--_appearance-spin-button, auto);
+  }
+
+  input[type='number'] {
+    -moz-appearance: var(--_appearance-spin-button, textfield);
+  }
+`;
 var input_styles_default = style;
 export {
   input_styles_default as default

package/components/pagination/index.d.ts

@@ -0,0 +1 @@
+export * from './pagination';

package/components/pagination/index.js

@@ -0,0 +1 @@
+export * from "./pagination.js";

package/components/pagination/pagination.component.d.ts

@@ -0,0 +1,82 @@
+import { GdsElement } from '../../gds-element';
+/**
+ * Centralized density configuration
+ */
+declare const DENSITY_CONFIG: {
+    readonly compact: {
+        readonly button: "small";
+        readonly font: "detail-book-s";
+        readonly gap: "xl";
+        readonly navGap: "xs";
+        readonly input: "small";
+        readonly inputWidth: "140px";
+        readonly inputPadding: "m";
+    };
+    readonly comfortable: {
+        readonly button: "small";
+        readonly font: "detail-book-s";
+        readonly gap: "2xl";
+        readonly navGap: "s";
+        readonly input: "small";
+        readonly inputWidth: "140px";
+        readonly inputPadding: "m";
+    };
+    readonly spacious: {
+        readonly button: "medium";
+        readonly font: "detail-book-m";
+        readonly gap: "2xl";
+        readonly navGap: "s";
+        readonly input: "large";
+        readonly inputWidth: "200px";
+        readonly inputPadding: "xl";
+    };
+};
+type DensityMode = keyof typeof DENSITY_CONFIG;
+declare const GdsPagination_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").MarginProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeXProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").LayoutChildProps) & typeof GdsElement;
+/**
+ * @element gds-pagination
+ * @status beta
+ *
+ * @summary A pagination component with page navigation, configurable rows per page, and responsive layout.
+ *
+ * @event gds-page-change - Fired when the active page changes.
+ * @event gds-rows-change - Fired when the rows per page value changes.
+ */
+export declare class GdsPagination extends GdsPagination_base {
+    #private;
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * Sets the active page, initially the first page.
+     */
+    page: number;
+    /**
+     * Sets the numbers of rows to show, defaults to 10
+     */
+    rows: number;
+    total: number;
+    /**
+     * Options array to set the nunber of items per page.
+     * Defaults to `[5, 10, 25, 50]`
+     */
+    options: number[];
+    /**
+     * Enables first and last button
+     */
+    jump: boolean;
+    /**
+     * Controls density mode on pagination
+     * Accepts: `comfortable`, `compact`, `spacious`
+     */
+    density: DensityMode;
+    /**
+     * The text summary to display on the left side (e.g. "1-10 of 100").
+     * If a slot named "label" is provided, this property is ignored.
+     */
+    label: string;
+    private _elInput?;
+    private _isMobile;
+    private _jumpPopoverOpen;
+    private _handleMobile;
+    render(): any;
+}
+export {};