@sebgroup/green-core 2.29.0 → 2.30.0

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

@@ -34,6 +34,10 @@ declare class Button extends GdsFormControlElement<any> {
      * The label of the button. Use this to add an accessible label to the button when no text is provided in the default slot.
      */
     label: string;
+    /**
+     * When set, adds a wrapped class to the button.
+     */
+    wrapped: boolean;
     /**
      * When set, the underlying button will be rendered as an anchor element.
      */

package/components/button/button.component.js

@@ -37,6 +37,7 @@ class Button extends GdsFormControlElement {
     this.variant = "neutral";
     this.size = "medium";
     this.label = "";
+    this.wrapped = false;
     this.href = "";
     __privateAdd(this, _isIconButton, false);
     // Check if the button is an icon button.
@@ -95,7 +96,8 @@ class Button extends GdsFormControlElement {
       warning: this.variant === "warning",
       primary: this.rank === "primary",
       secondary: this.rank === "secondary",
-      tertiary: this.rank === "tertiary"
+      tertiary: this.rank === "tertiary",
+      wrapped: this.wrapped
     };
     const tag = __privateGet(this, _Button_instances, isLink_get) ? literal`a` : literal`button`;
     return staticHtml`
@@ -174,6 +176,13 @@ __decorateClass([
 __decorateClass([
   property()
 ], Button.prototype, "label", 2);
+__decorateClass([
+  property({
+    attribute: "wrapped",
+    type: Boolean,
+    reflect: true
+  })
+], Button.prototype, "wrapped", 2);
 __decorateClass([
   property()
 ], Button.prototype, "href", 2);

package/components/button/button.styles.js

@@ -25,10 +25,11 @@ const style = css`
       box-sizing: border-box;
       border: none;
       cursor: pointer;
-      block-size: var(--_block-size);
+      min-block-size: var(--_block-size);
+      min-width: 0;
       background-color: var(--gds-sys-color-l3-neutral-01);
       color: var(--gds-sys-color-content-neutral-03);
-      border-radius: var(--gds-sys-radius-max);
+      border-radius: calc(var(--_block-size) / 1.8);
       font-family: inherit;
       font: var(--gds-sys-text-detail-book-m);
       gap: var(--gds-sys-space-xs);
@@ -70,11 +71,12 @@ const style = css`
         );
       }
 
-      &:not(.circle) slot:not([name]) {
+      &:not(.circle, .wrapped) slot:not([name]) {
         display: block;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        min-width: 0;
       }
     }
   }
@@ -146,6 +148,7 @@ const style = css`
       gap: var(--gds-sys-space-3xs);
       font: var(--gds-sys-text-detail-book-xs);
       padding-inline: var(--gds-sys-space-s);
+      padding-block: 0;
     }
 
     :host([size='small']) .button {

package/components/radio/radio-group/radio-group.component.d.ts

@@ -1,6 +1,6 @@
 import { GdsFormControlElement } from '../../form/form-control';
 import type { GdsRadio } from '../radio';
-declare class RadioGroup extends GdsFormControlElement<string> {
+declare class RadioGroup extends GdsFormControlElement<string | boolean> {
     #private;
     static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     /**

package/components/radio/radio.component.d.ts

@@ -19,7 +19,7 @@ export declare class GdsRadio extends GdsElement {
     /**
      * The value of the radio button.
      */
-    value: string;
+    value: string | boolean;
     /**
      * Whether the radio button is checked or not.
      */

package/components/radio/radio.component.js

@@ -22,7 +22,7 @@ let GdsRadio = class extends GdsElement {
     this.invalid = false;
     this._isFocused = false;
     __privateAdd(this, _handleClick, (e) => {
-      if (this.disabled || !this.value || !this.label) return;
+      if (this.disabled || !this.label) return;
       e.preventDefault();
       this.checked = true;
       this.focus();
@@ -87,7 +87,7 @@ __decorateClass([
   property({ attribute: "supporting-text" })
 ], GdsRadio.prototype, "supportingText", 2);
 __decorateClass([
-  property()
+  property({ type: String })
 ], GdsRadio.prototype, "value", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })