@sebgroup/green-core 1.18.1 → 1.20.0

package/chunks/{chunk.IQE6F4ZC.js → chunk.2RF5VP6K.js}

@@ -1,15 +1,18 @@
 import {
   GdsSegment
-} from "./chunk.ETETI45J.js";
+} from "./chunk.VHKGMBUL.js";
+import {
+  resizeObserver
+} from "./chunk.VHN4JEZC.js";
 import {
   tokens
-} from "./chunk.3CAFC46K.js";
+} from "./chunk.W2XAWNZY.js";
 import {
   TransitionalStyles
-} from "./chunk.XQ3SZZAO.js";
+} from "./chunk.ZLWSCK7R.js";
 import {
   GdsElement
-} from "./chunk.2LQSDOD4.js";
+} from "./chunk.EM7MZKG5.js";
 import {
   watch
 } from "./chunk.2WO4NHJ2.js";
@@ -128,7 +131,7 @@ var BTN_SIZE = {
   medium: 44
 };
 var getSegmentGap = (transitionalStyles) => transitionalStyles ? 0 : 4;
-var _value, _tid, _resizeObserver, _firstVisibleIndex, _calculatedSegmentWidth, _segmentWidth, _segmentsContainerLeft, _focusedIndex, _dragStartX, _dragStartLeft, _isDragging, _startDrag, _drag, _endDrag, _calcVisibleAfterDrag, _calcLayout, _applySegmentsTransform, _handleSlotChange, handleSlotChange_fn, _scrollLeft, _scrollRight, _updateScrollBtnState, _updateIndicator, _handleSegmentClick, _updateSelectedFromValue;
+var _value, _firstVisibleIndex, _calculatedSegmentWidth, _segmentWidth, _segmentsContainerLeft, _focusedIndex, _dragStartX, _dragStartLeft, _isDragging, _startDrag, _drag, _endDrag, _calcVisibleAfterDrag, _calcLayout, _applySegmentsTransform, _handleSlotChange, handleSlotChange_fn, _scrollLeft, _scrollRight, _updateScrollBtnState, _updateIndicator, _handleSegmentClick, _updateSelectedFromValue;
 var GdsSegmentedControl = class extends GdsElement {
   constructor() {
     super(...arguments);
@@ -138,13 +141,6 @@ var GdsSegmentedControl = class extends GdsElement {
     __privateAdd(this, _value, void 0);
     this._showPrevButton = false;
     this._showNextButton = false;
-    __privateAdd(this, _tid, void 0);
-    __privateAdd(this, _resizeObserver, new ResizeObserver(() => {
-      __privateGet(this, _tid) && clearTimeout(__privateGet(this, _tid));
-      __privateSet(this, _tid, setTimeout(() => {
-        __privateGet(this, _calcLayout).call(this);
-      }, 20));
-    }));
     __privateAdd(this, _firstVisibleIndex, 0);
     __privateAdd(this, _calculatedSegmentWidth, 0);
     __privateAdd(this, _segmentWidth, 0);
@@ -322,7 +318,6 @@ var GdsSegmentedControl = class extends GdsElement {
   connectedCallback() {
     super.connectedCallback();
     TransitionalStyles.instance.apply(this, "gds-segmented-control");
-    __privateGet(this, _resizeObserver).observe(this);
     this.addEventListener("focusin", (e) => {
       if (e.target instanceof GdsSegment) {
         __privateSet(this, _focusedIndex, this.segments.indexOf(e.target));
@@ -330,13 +325,8 @@ var GdsSegmentedControl = class extends GdsElement {
       }
     });
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    __privateGet(this, _resizeObserver).unobserve(this);
-  }
   render() {
-    return html`${this._tStyles}
-      ${when(
+    return html`${when(
       this._showPrevButton,
       () => html`<button
             id="btn-prev"
@@ -386,8 +376,6 @@ var GdsSegmentedControl = class extends GdsElement {
   }
 };
 _value = new WeakMap();
-_tid = new WeakMap();
-_resizeObserver = new WeakMap();
 _firstVisibleIndex = new WeakMap();
 _calculatedSegmentWidth = new WeakMap();
 _segmentWidth = new WeakMap();
@@ -427,9 +415,6 @@ __decorateClass([
 __decorateClass([
   property()
 ], GdsSegmentedControl.prototype, "value", 1);
-__decorateClass([
-  state()
-], GdsSegmentedControl.prototype, "_tStyles", 2);
 __decorateClass([
   query("slot")
 ], GdsSegmentedControl.prototype, "_elSlot", 2);
@@ -449,6 +434,7 @@ __decorateClass([
   state()
 ], GdsSegmentedControl.prototype, "_showNextButton", 2);
 __decorateClass([
+  resizeObserver(),
   watch("segMinWidth")
 ], GdsSegmentedControl.prototype, "_recalculateMinWidth", 1);
 GdsSegmentedControl = __decorateClass([

package/chunks/{chunk.7ZCWP4FY.js → chunk.3KJV6CHY.js}

@@ -1,9 +1,9 @@
 import {
   TransitionalStyles
-} from "./chunk.XQ3SZZAO.js";
+} from "./chunk.ZLWSCK7R.js";
 import {
   GdsElement
-} from "./chunk.2LQSDOD4.js";
+} from "./chunk.EM7MZKG5.js";
 import {
   gdsCustomElement
 } from "./chunk.VOYMQ322.js";

package/chunks/{chunk.TN6ZYAH3.js → chunk.3RYYLMGT.js}

@@ -1,6 +1,6 @@
 import {
   constrainSlots
-} from "./chunk.6NM7ENKA.js";
+} from "./chunk.KBYQYDL3.js";
 import {
   __decorateClass,
   __privateAdd,

package/chunks/{chunk.ZEJDA4NS.js → chunk.5PHLJFEX.js}

@@ -4,10 +4,10 @@ import {
 } from "./chunk.2ND5EWHE.js";
 import {
   TransitionalStyles
-} from "./chunk.XQ3SZZAO.js";
+} from "./chunk.ZLWSCK7R.js";
 import {
   GdsElement
-} from "./chunk.2LQSDOD4.js";
+} from "./chunk.EM7MZKG5.js";
 import {
   watch
 } from "./chunk.2WO4NHJ2.js";
@@ -24,7 +24,7 @@ import {
 
 // libs/core/src/primitives/listbox/option.ts
 import { html } from "lit";
-import { property, state } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import { classMap } from "lit/directives/class-map.js";
 import "reflect-metadata";
@@ -88,8 +88,7 @@ var GdsOption = class extends Focusable(GdsElement) {
       else
         this.removeAttribute("highlighted");
     }
-    return html`${this._tStyles}
-      <div>${when(isMultiple, () => checkbox)} <slot></slot></div>`;
+    return html`<div>${when(isMultiple, () => checkbox)} <slot></slot></div>`;
   }
 };
 _hidden = new WeakMap();
@@ -125,9 +124,6 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], GdsOption.prototype, "isPlaceholder", 2);
-__decorateClass([
-  state()
-], GdsOption.prototype, "_tStyles", 2);
 __decorateClass([
   watch("isplaceholder")
 ], GdsOption.prototype, "_handlePlaceholderStatusChange", 1);

package/chunks/{chunk.IYCENQZG.js → chunk.6LA2CKUM.js}

@@ -1,6 +1,6 @@
 import {
   GdsElement
-} from "./chunk.2LQSDOD4.js";
+} from "./chunk.EM7MZKG5.js";
 import {
   gdsCustomElement,
   html

package/chunks/{chunk.WDJWH2TN.js → chunk.A62LO4CP.js}

@@ -1,6 +1,6 @@
 import {
   tokens
-} from "./chunk.3CAFC46K.js";
+} from "./chunk.W2XAWNZY.js";
 import {
   gdsCustomElement
 } from "./chunk.VOYMQ322.js";

package/chunks/{chunk.CHEU4C5J.js → chunk.BJCCPLEO.js}

@@ -1,9 +1,9 @@
 import {
   TransitionalStyles
-} from "./chunk.XQ3SZZAO.js";
+} from "./chunk.ZLWSCK7R.js";
 import {
   GdsElement
-} from "./chunk.2LQSDOD4.js";
+} from "./chunk.EM7MZKG5.js";
 import {
   gdsCustomElement,
   html

package/chunks/{chunk.2Y3BHFKO.js → chunk.BKSMVF4C.js}

@@ -1,6 +1,6 @@
 import {
   GdsElement
-} from "./chunk.2LQSDOD4.js";
+} from "./chunk.EM7MZKG5.js";
 import {
   gdsCustomElement,
   html
@@ -134,6 +134,14 @@ var GdsIcon = class extends GdsElement {
           <line x1="12" y1="9" x2="12" y2="13" />
           <path x1="12" y1="17" x2="12.01" y2="17" />
         </symbol>
+        <symbol id="checkmark">
+          <path
+            d="M2.75 15.0938L9 20.25L21.25 3.75"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </symbol>
       </svg>
       <svg viewBox="0 0 24 24">
         <use href="#${name}"></use>

package/chunks/chunk.C3ECHGX7.js

@@ -0,0 +1,31 @@
+// libs/core/src/utils/helpers/attribute-converters.ts
+var dateConverter = {
+  fromAttribute(value) {
+    return new Date(value);
+  },
+  toAttribute(value) {
+    return value.toISOString();
+  }
+};
+var dateArrayConverter = {
+  fromAttribute(value) {
+    return value.split(",").map((d) => new Date(d.trim()));
+  },
+  toAttribute(value) {
+    return JSON.stringify(value.map((d) => d.toISOString()));
+  }
+};
+var stringArrayConverter = {
+  fromAttribute(value) {
+    return value.split(",");
+  },
+  toAttribute(value) {
+    return Array.isArray(value) ? value.join(",") : value;
+  }
+};
+
+export {
+  dateConverter,
+  dateArrayConverter,
+  stringArrayConverter
+};

package/chunks/{chunk.WEE5C637.js → chunk.CGZNEIGV.js}

@@ -1,15 +1,15 @@
 import {
   GdsFormControlElement
-} from "./chunk.YIQIH4RW.js";
-import {
-  TransitionalStyles
-} from "./chunk.XQ3SZZAO.js";
+} from "./chunk.XOARVFGN.js";
 import {
   observeLightDOM
 } from "./chunk.WM7HBMMV.js";
+import {
+  TransitionalStyles
+} from "./chunk.ZLWSCK7R.js";
 import {
   constrainSlots
-} from "./chunk.6NM7ENKA.js";
+} from "./chunk.KBYQYDL3.js";
 import {
   watch
 } from "./chunk.2WO4NHJ2.js";
@@ -27,7 +27,7 @@ import {
 } from "./chunk.5VURDMKE.js";
 
 // libs/core/src/components/dropdown/dropdown.ts
-import { property, query, queryAsync, state } from "lit/decorators.js";
+import { property, query, queryAsync } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { when } from "lit/directives/when.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -199,7 +199,6 @@ var GdsDropdown = class extends GdsFormControlElement {
   }
   render() {
     return html`
-      ${this._tStyles}
       ${when(
       this.label && !this.hideLabel,
       () => html`<label for="trigger">${this.label}</label>`
@@ -382,9 +381,6 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, attribute: "hide-label" })
 ], GdsDropdown.prototype, "hideLabel", 2);
-__decorateClass([
-  state()
-], GdsDropdown.prototype, "_tStyles", 2);
 __decorateClass([
   query("#trigger")
 ], GdsDropdown.prototype, "_elTriggerBtn", 2);

package/chunks/{chunk.XXIQLCV7.js → chunk.CH2GIVY6.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk.375BWME4.js";
 import {
   TransitionalStyles
-} from "./chunk.XQ3SZZAO.js";
+} from "./chunk.ZLWSCK7R.js";
 import {
   GdsElement
-} from "./chunk.2LQSDOD4.js";
+} from "./chunk.EM7MZKG5.js";
 import {
   watch
 } from "./chunk.2WO4NHJ2.js";
@@ -23,7 +23,7 @@ import {
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { when } from "lit/directives/when.js";
-import { property, query, state } from "lit/decorators.js";
+import { property, query } from "lit/decorators.js";
 import { msg } from "@lit/localize";
 import {
   addDays,
@@ -97,61 +97,60 @@ var GdsCalendar = class extends GdsElement {
   }
   render() {
     const currentDate = /* @__PURE__ */ new Date();
-    return html`${this._tStyles}
-      <table>
-        <thead>
-          <tr>
-            ${when(this.showWeekNumbers, () => html`<th></th>`)}
-            <th>${msg("Mon")}</th>
-            <th>${msg("Tue")}</th>
-            <th>${msg("Wed")}</th>
-            <th>${msg("Thu")}</th>
-            <th>${msg("Fri")}</th>
-            <th>${msg("Sat")}</th>
-            <th>${msg("Sun")}</th>
-          </tr>
-        </thead>
-        <tbody>
-          ${renderMonthGridView(
+    return html`<table>
+      <thead>
+        <tr>
+          ${when(this.showWeekNumbers, () => html`<th></th>`)}
+          <th>${msg("Mon")}</th>
+          <th>${msg("Tue")}</th>
+          <th>${msg("Wed")}</th>
+          <th>${msg("Thu")}</th>
+          <th>${msg("Fri")}</th>
+          <th>${msg("Sat")}</th>
+          <th>${msg("Sun")}</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${renderMonthGridView(
       this.focusedDate,
       (weeks) => html`
-              ${weeks.map(
+            ${weeks.map(
         (week) => html`
-                  <tr>
-                    ${when(
+                <tr>
+                  ${when(
           this.showWeekNumbers,
           () => html`<td class="week-number">
-                          ${getWeek(week.days[0])}
-                        </td>`
+                        ${getWeek(week.days[0])}
+                      </td>`
         )}
-                    ${week.days.map((day) => {
+                  ${week.days.map((day) => {
           const isOutsideCurrentMonth = !isSameMonth(this.focusedDate, day) || day < this.min || day > this.max;
           const isWeekend = day.getDay() === 0 || day.getDay() === 6;
           const isDisabled = isOutsideCurrentMonth || this.disabledWeekends && isWeekend || this.disabledDates && this.disabledDates.some((d) => isSameDay(d, day));
           return html`
-                        <td
-                          class="${classMap({
+                      <td
+                        class="${classMap({
             disabled: Boolean(isDisabled),
             today: isSameDay(currentDate, day)
           })}"
-                          ?disabled=${isDisabled}
-                          tabindex="${isSameDay(this.focusedDate, day) ? 0 : -1}"
-                          aria-selected="${this.value && isSameDay(this.value, day)}"
-                          aria-label="${day.toDateString()}"
-                          @click=${() => isDisabled ? null : __privateMethod(this, _setSelectedDate, setSelectedDate_fn).call(this, day)}
-                          id="dateCell-${day.getDate()}"
-                        >
-                          ${day.getDate()}
-                        </td>
-                      `;
+                        ?disabled=${isDisabled}
+                        tabindex="${isSameDay(this.focusedDate, day) ? 0 : -1}"
+                        aria-selected="${this.value && isSameDay(this.value, day)}"
+                        aria-label="${day.toDateString()}"
+                        @click=${() => isDisabled ? null : __privateMethod(this, _setSelectedDate, setSelectedDate_fn).call(this, day)}
+                        id="dateCell-${day.getDate()}"
+                      >
+                        ${day.getDate()}
+                      </td>
+                    `;
         })}
-                  </tr>
-                `
+                </tr>
+              `
       )}
-            `
+          `
     )}
-        </tbody>
-      </table>`;
+      </tbody>
+    </table>`;
   }
   _valueChanged() {
     if (!this.value)
@@ -259,9 +258,6 @@ __decorateClass([
 __decorateClass([
   query('td[tabindex="0"]')
 ], GdsCalendar.prototype, "_elFocusedCell", 2);
-__decorateClass([
-  state()
-], GdsCalendar.prototype, "_tStyles", 2);
 __decorateClass([
   watch("value")
 ], GdsCalendar.prototype, "_valueChanged", 1);

package/chunks/{chunk.Q6AEDXQF.js → chunk.CUR4WRCG.js}

@@ -1,12 +1,12 @@
-import {
-  TransitionalStyles
-} from "./chunk.XQ3SZZAO.js";
 import {
   watchMediaQuery
 } from "./chunk.WM7HBMMV.js";
+import {
+  TransitionalStyles
+} from "./chunk.ZLWSCK7R.js";
 import {
   GdsElement
-} from "./chunk.2LQSDOD4.js";
+} from "./chunk.EM7MZKG5.js";
 import {
   watch
 } from "./chunk.2WO4NHJ2.js";
@@ -195,23 +195,22 @@ var GdsPopover = class extends GdsElement {
     __privateMethod(this, _unregisterTriggerEvents, unregisterTriggerEvents_fn).call(this);
   }
   render() {
-    return html`${this._tStyles}
-      <dialog
-        class="${classMap({ "v-kb-visible": this._isVirtKbVisible })}"
-        ${ref(__privateGet(this, _dialogElementRef))}
-      >
-        <header>
-          <h2>${this.label}</h2>
-          <button
-            class="close"
-            @click=${__privateGet(this, _handleCloseButton)}
-            aria-label="${msg("Close")}"
-          >
-            <i></i>
-          </button>
-        </header>
-        <slot></slot>
-      </dialog>`;
+    return html`<dialog
+      class="${classMap({ "v-kb-visible": this._isVirtKbVisible })}"
+      ${ref(__privateGet(this, _dialogElementRef))}
+    >
+      <header>
+        <h2>${this.label}</h2>
+        <button
+          class="close"
+          @click=${__privateGet(this, _handleCloseButton)}
+          aria-label="${msg("Close")}"
+        >
+          <i></i>
+        </button>
+      </header>
+      <slot></slot>
+    </dialog>`;
   }
   _handleOpenChange() {
     this.setAttribute("aria-hidden", String(!this.open));
@@ -342,9 +341,6 @@ __decorateClass([
 __decorateClass([
   watch("_trigger")
 ], GdsPopover.prototype, "_handleTriggerChanged", 1);
-__decorateClass([
-  state()
-], GdsPopover.prototype, "_tStyles", 2);
 __decorateClass([
   watch("open")
 ], GdsPopover.prototype, "_handleOpenChange", 1);

package/chunks/{chunk.URP77GWW.js → chunk.EC77QYRA.js}

@@ -4,10 +4,10 @@ import {
 } from "./chunk.2ND5EWHE.js";
 import {
   TransitionalStyles
-} from "./chunk.XQ3SZZAO.js";
+} from "./chunk.ZLWSCK7R.js";
 import {
   GdsElement
-} from "./chunk.2LQSDOD4.js";
+} from "./chunk.EM7MZKG5.js";
 import {
   gdsCustomElement,
   html
@@ -19,7 +19,6 @@ import {
 } from "./chunk.5VURDMKE.js";
 
 // libs/core/src/primitives/menu/menu-item.ts
-import { state } from "lit/decorators.js";
 var _handleOnClick;
 var GdsMenuItem = class extends Focusable(GdsElement) {
   constructor() {
@@ -46,15 +45,11 @@ var GdsMenuItem = class extends Focusable(GdsElement) {
     TransitionalStyles.instance.apply(this, "gds-option");
   }
   render() {
-    return html`${this._tStyles}
-      <div><slot></slot></div>`;
+    return html`<div><slot></slot></div>`;
   }
 };
 _handleOnClick = new WeakMap();
 GdsMenuItem.styles = [option_styles_default];
-__decorateClass([
-  state()
-], GdsMenuItem.prototype, "_tStyles", 2);
 GdsMenuItem = __decorateClass([
   gdsCustomElement("gds-menu-item")
 ], GdsMenuItem);

package/chunks/{chunk.2LQSDOD4.js → chunk.EM7MZKG5.js}

@@ -1,21 +1,25 @@
+import {
+  DynamicStylesController
+} from "./chunk.W7CV3QYI.js";
 import {
   getUnscopedTagName
 } from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass
+} from "./chunk.5VURDMKE.js";
 
 // libs/core/src/gds-element.ts
+import { state } from "lit/decorators.js";
 import { LitElement } from "lit";
 var GdsElement = class extends LitElement {
   constructor() {
-    super(...arguments);
+    super();
     /**
      * The unscoped name of this element.
      */
     this.gdsElementName = "";
-    /**
-     * Whether the element is using transitional styles.
-     * @internal
-     */
     this._isUsingTransitionalStyles = false;
+    this._dynamicStylesController = new DynamicStylesController(this);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -23,6 +27,9 @@ var GdsElement = class extends LitElement {
     this.setAttribute("gds-element", this.gdsElementName);
   }
 };
+__decorateClass([
+  state()
+], GdsElement.prototype, "_isUsingTransitionalStyles", 2);
 
 export {
   GdsElement

package/chunks/{chunk.6L4FAOI6.js → chunk.GOOHCUU6.js}

@@ -1,15 +1,18 @@
 import {
-  GdsFormControlElement
-} from "./chunk.YIQIH4RW.js";
+  forwardAttributes
+} from "./chunk.YBOK7MI7.js";
 import {
   tokens
-} from "./chunk.3CAFC46K.js";
+} from "./chunk.W2XAWNZY.js";
+import {
+  GdsFormControlElement
+} from "./chunk.XOARVFGN.js";
 import {
   TransitionalStyles
-} from "./chunk.XQ3SZZAO.js";
+} from "./chunk.ZLWSCK7R.js";
 import {
   constrainSlots
-} from "./chunk.6NM7ENKA.js";
+} from "./chunk.KBYQYDL3.js";
 import {
   gdsCustomElement,
   html
@@ -22,7 +25,7 @@ import {
 } from "./chunk.5VURDMKE.js";
 
 // libs/core/src/components/button/button.ts
-import { unsafeCSS } from "lit";
+import { nothing, unsafeCSS } from "lit";
 import { property, query } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import { classMap } from "lit/directives/class-map.js";
@@ -393,6 +396,7 @@ var GdsButton = class extends GdsFormControlElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this.setAttribute("role", "none");
     TransitionalStyles.instance.apply(this, "gds-button");
   }
   render() {
@@ -413,13 +417,14 @@ var GdsButton = class extends GdsFormControlElement {
         ?type="${this.type}"
         ?disabled="${this.disabled}"
         @click="${__privateGet(this, _handleClick)}"
-        aria-label="${this.label}"
+        aria-label=${this.label || nothing}
+        part="_button"
+        ${forwardAttributes(
+      (attr) => attr.name.startsWith("gds-aria") || attr.name === "gds-role"
+    )}
       >
         <slot name="lead" gds-allow="gds-icon"></slot>
-        <slot
-          @slotchange=${__privateGet(this, _mainSlotChange)}
-          gds-allow="#text gds-icon"
-        ></slot>
+        <slot @slotchange=${__privateGet(this, _mainSlotChange)}></slot>
         <slot name="trail" gds-allow="gds-icon"></slot>
         ${when(
       !this._isUsingTransitionalStyles,

package/chunks/{chunk.6NM7ENKA.js → chunk.KBYQYDL3.js}

@@ -12,7 +12,10 @@ function constrainSlots(self) {
     }
     const constrain = (slot) => {
       var _a2, _b2;
-      const allowed = ((_a2 = slot.getAttribute("gds-allow")) == null ? void 0 : _a2.split(" ")) || [];
+      const allowed = [
+        ...((_a2 = slot.getAttribute("gds-allow")) == null ? void 0 : _a2.split(" ")) || [],
+        "slot"
+      ];
       for (const node of Array.from(slot.assignedNodes())) {
         if (!allowed.includes(node.nodeName.toLowerCase())) {
           (_b2 = node.parentNode) == null ? void 0 : _b2.removeChild(node);

package/chunks/{chunk.XMPBXAGB.js → chunk.NBEFLQNK.js}

@@ -17,7 +17,6 @@ var style = css`
       grid-column-gap: var(--_gap-column);
       grid-row-gap: var(--_gap-row);
       padding: var(--_grid-padding);
-      text-wrap: balance;
     }
 
     :host([auto-columns]) {