@sebgroup/green-core 1.90.2 → 2.0.0

package/components/badge/badge.component.js

@@ -2,8 +2,8 @@ import {
   __decorateClass,
   __privateAdd,
   __privateMethod
-} from "../../chunks/chunk.QTSIPXV3.js";
-var _renderLeadSlot, renderLeadSlot_fn, _renderMainSlot, renderMainSlot_fn, _handleSlotChange, handleSlotChange_fn, _renderTrailSlot, renderTrailSlot_fn;
+} from "../../chunks/chunk.QU3DSPNU.js";
+var _GdsBadge_instances, renderLeadSlot_fn, renderMainSlot_fn, handleSlotChange_fn, renderTrailSlot_fn;
 import { property, state } from "lit/decorators.js";
 import { GdsElement } from "../../gds-element.js";
 import { html } from "../../scoping.js";
@@ -15,26 +15,57 @@ import {
   withSizeXProps
 } from "../../utils/mixins/declarative-layout-mixins.js";
 import { GdsFlex } from "../flex/flex.component.js";
-import BadgeCSS from "./badge.style.js";
+import BadgeStyles from "./badge.styles.js";
 let GdsBadge = class extends withSizeXProps(
   withMarginProps(withLayoutChildProps(GdsElement))
 ) {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _renderLeadSlot);
-    __privateAdd(this, _renderMainSlot);
-    __privateAdd(this, _handleSlotChange);
-    __privateAdd(this, _renderTrailSlot);
+    __privateAdd(this, _GdsBadge_instances);
     this.variant = "information";
     this.size = "default";
-    this.disabled = false;
     this.notification = false;
     this.rounded = false;
     this.mainSlotOccupied = false;
   }
   render() {
-    const background = this.disabled ? "disabled" : this.notification ? this.variant : this.variant + "-badge";
-    const color = this.disabled ? "disabled" : this.notification ? "primary" : this.variant;
+    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 = this.size === "small" || this.notification ? "2xs" : "xs";
     const blockSize = this.mainSlotOccupied ? this.size === "small" || this.notification ? "m" : "l" : "xs";
     return html`<gds-flex
@@ -48,26 +79,22 @@ let GdsBadge = class extends withSizeXProps(
       border-radius="${this.notification || this.rounded ? "max" : "2xs"}"
       block-size="${blockSize}"
       width="100%"
-      font-size="${this.size === "small" || this.notification ? "detail-xs" : "detail-s"}"
-      pointer-events=${this.disabled ? "none" : "auto"}
-      user-select="${this.disabled ? "none" : "auto"}"
+      font="${this.size === "small" || this.notification ? "detail-regular-xs" : "detail-regular-s"}"
     >
-      ${__privateMethod(this, _renderLeadSlot, renderLeadSlot_fn).call(this)} ${__privateMethod(this, _renderMainSlot, renderMainSlot_fn).call(this)}
-      ${__privateMethod(this, _renderTrailSlot, renderTrailSlot_fn).call(this)}
+      ${__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>`;
   }
 };
-_renderLeadSlot = new WeakSet();
+_GdsBadge_instances = new WeakSet();
 renderLeadSlot_fn = function() {
   if (this.size !== "small" || !this.notification) {
     return html`<slot name="lead"></slot>`;
   }
 };
-_renderMainSlot = new WeakSet();
 renderMainSlot_fn = function() {
-  return html`<slot @slotchange=${__privateMethod(this, _handleSlotChange, handleSlotChange_fn)}></slot>`;
+  return html`<slot @slotchange=${__privateMethod(this, _GdsBadge_instances, handleSlotChange_fn)}></slot>`;
 };
-_handleSlotChange = new WeakSet();
 handleSlotChange_fn = function(event) {
   const slot = event.target;
   const assignedNodes = slot.assignedNodes({ flatten: true });
@@ -75,24 +102,16 @@ handleSlotChange_fn = function(event) {
     (node) => node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.TEXT_NODE && node.textContent?.trim() !== ""
   );
 };
-_renderTrailSlot = new WeakSet();
 renderTrailSlot_fn = function() {
   return html`<slot name="trail"></slot>`;
 };
-GdsBadge.styles = [tokens, BadgeCSS];
+GdsBadge.styles = [tokens, BadgeStyles];
 __decorateClass([
   property()
 ], GdsBadge.prototype, "variant", 2);
 __decorateClass([
   property({ type: String })
 ], GdsBadge.prototype, "size", 2);
-__decorateClass([
-  property({
-    attribute: "disabled",
-    type: Boolean,
-    reflect: true
-  })
-], GdsBadge.prototype, "disabled", 2);
 __decorateClass([
   property({
     attribute: "notification",

package/components/badge/badge.js

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.QTSIPXV3.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { GdsBadge } from "./badge.component.js";
 GdsBadge.define();
 export {

package/components/badge/{badge.style.js → badge.styles.js}

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.QTSIPXV3.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { css } from "lit";
 const style = css`
   :host {
@@ -17,7 +17,7 @@ const style = css`
     line-height: var(--gds-sys-space-s);
   }
 `;
-var badge_style_default = style;
+var badge_styles_default = style;
 export {
-  badge_style_default as default
+  badge_styles_default as default
 };

package/components/blur/blur.component.js

@@ -1,15 +1,15 @@
 import {
   __decorateClass
-} from "../../chunks/chunk.QTSIPXV3.js";
+} from "../../chunks/chunk.QU3DSPNU.js";
 import { GdsElement } from "../../gds-element.js";
 import { gdsCustomElement, html } from "../../scoping.js";
-import styles from "./blur.styles.js";
+import BlurStyles from "./blur.styles.js";
 let GdsBlur = class extends GdsElement {
   render() {
-    return html`<slot></slot>`;
+    return html`<div class="blur"><slot></slot></div>`;
   }
 };
-GdsBlur.styles = styles;
+GdsBlur.styles = BlurStyles;
 GdsBlur = __decorateClass([
   gdsCustomElement("gds-blur")
 ], GdsBlur);

package/components/blur/blur.js

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.QTSIPXV3.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { GdsBlur } from "./blur.component.js";
 GdsBlur.define();
 export {

package/components/blur/blur.styles.js

@@ -1,8 +1,11 @@
-import "../../chunks/chunk.QTSIPXV3.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { css } from "lit";
 const style = css`
   :host {
     --_blur: 5px;
+  }
+
+  .blur {
     filter: blur(var(--_blur));
   }
 `;

package/components/breadcrumbs/breadcrumbs.component.js

@@ -1,6 +1,6 @@
 import {
   __decorateClass
-} from "../../chunks/chunk.QTSIPXV3.js";
+} from "../../chunks/chunk.QU3DSPNU.js";
 import { localized, msg } from "@lit/localize";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
@@ -16,7 +16,7 @@ import {
   withSizeXProps
 } from "../../utils/mixins/declarative-layout-mixins.js";
 import { IconChevronLeft } from "../icon/icons/chevron-left.component.js";
-import breadcrumbsCSS from "./breadcrumbs.styles.js";
+import BreadcrumbStyles from "./breadcrumbs.styles.js";
 let GdsBreadcrumbs = class extends withLayoutChildProps(
   withSizeXProps(withMarginProps(GdsElement))
 ) {
@@ -55,7 +55,7 @@ let GdsBreadcrumbs = class extends withLayoutChildProps(
     `;
   }
 };
-GdsBreadcrumbs.styles = [tokens, breadcrumbsCSS];
+GdsBreadcrumbs.styles = [tokens, BreadcrumbStyles];
 __decorateClass([
   property({ type: String })
 ], GdsBreadcrumbs.prototype, "size", 2);

package/components/breadcrumbs/breadcrumbs.js

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.QTSIPXV3.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { GdsBreadcrumbs } from "./breadcrumbs.component.js";
 GdsBreadcrumbs.define();
 export {

package/components/breadcrumbs/breadcrumbs.styles.js

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.QTSIPXV3.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { css } from "lit";
 const style = css`
   @layer base, reset, transitional-styles;
@@ -12,14 +12,11 @@ const style = css`
       align-items: center;
       width: max-content;
       gap: var(--gds-sys-space-s);
-      font-size: var(--gds-sys-text-size-detail-m);
-      line-height: var(--gds-sys-text-line-height-detail-m);
-      font-weight: var(--gds-sys-text-weight-regular);
+      font: var(--gds-sys-text-detail-book-m);
     }
 
     .size-small {
-      font-size: var(--gds-sys-text-size-detail-s);
-      line-height: var(--gds-sys-text-line-height-detail-s);
+      font: var(--gds-sys-text-detail-book-s);
       gap: var(--gds-sys-space-xs);
     }
 
@@ -55,7 +52,7 @@ const style = css`
     }
 
     li:last-child {
-      color: var(--gds-sys-color-l3-content-secondary);
+      color: var(--gds-sys-color-content-neutral-02);
     }
 
     .separator {

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

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

package/components/button/button.component.js

@@ -3,9 +3,9 @@ import {
   __privateAdd,
   __privateGet,
   __privateSet
-} from "../../chunks/chunk.QTSIPXV3.js";
-var _isIconButton, _isLink, isLink_get, _defaultRel, defaultRel_get, _mainSlotChange, _handleClick;
-import { nothing, unsafeCSS } from "lit";
+} from "../../chunks/chunk.QU3DSPNU.js";
+var _isIconButton, _Button_instances, isLink_get, defaultRel_get, _mainSlotChange, _handleClick;
+import { nothing } from "lit";
 import { property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -25,14 +25,13 @@ import {
   withSizeXProps
 } from "../../utils/mixins/declarative-layout-mixins.js";
 import { GdsFormControlElement } from "../form/form-control.js";
-import style from "./button.style.css.js";
+import ButtonStyles from "./button.styles.js";
 const ariaForwards = ["aria-label", "aria-haspopup", "aria-expanded"];
 const html = stripWhitespace(customElementHtml);
 class Button extends GdsFormControlElement {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _isLink);
-    __privateAdd(this, _defaultRel);
+    __privateAdd(this, _Button_instances);
     this.disabled = false;
     this.rank = "primary";
     this.variant = "neutral";
@@ -43,9 +42,7 @@ class Button extends GdsFormControlElement {
     // Check if the button is an icon button.
     __privateAdd(this, _mainSlotChange, () => {
       const assignedElements = this._mainSlot?.assignedElements() ?? [];
-      __privateSet(this, _isIconButton, assignedElements.length === 1 && assignedElements.some(
-        (element) => element.tagName.toLowerCase().startsWith("gds-icon")
-      ));
+      __privateSet(this, _isIconButton, assignedElements.length === 1 && (assignedElements[0].tagName.toLowerCase().startsWith("gds-icon") || assignedElements[0].getAttribute("name") === "icon"));
       this.requestUpdate();
     });
     __privateAdd(this, _handleClick, (e) => {
@@ -54,7 +51,7 @@ class Button extends GdsFormControlElement {
         composed: true,
         detail: e
       });
-      if (this.form && !__privateGet(this, _isLink, isLink_get)) {
+      if (this.form && !__privateGet(this, _Button_instances, isLink_get)) {
         if (this.type === "submit") {
           this.form.requestSubmit();
         } else if (this.type === "reset") {
@@ -79,23 +76,26 @@ class Button extends GdsFormControlElement {
       xs: this.size === "xs",
       small: this.size === "small",
       large: this.size === "large",
+      brand: this.variant === "brand",
       positive: this.variant === "positive",
       negative: this.variant === "negative",
+      notice: this.variant === "notice",
+      warning: this.variant === "warning",
       primary: this.rank === "primary",
       secondary: this.rank === "secondary",
       tertiary: this.rank === "tertiary"
     };
-    const tag = __privateGet(this, _isLink, isLink_get) ? literal`a` : literal`button`;
+    const tag = __privateGet(this, _Button_instances, isLink_get) ? literal`a` : literal`button`;
     return staticHtml`
       <${tag}
         class=${classMap(buttonClasses)}
-        type="${ifDefined(__privateGet(this, _isLink, isLink_get) ? void 0 : this.type)}"
+        type="${ifDefined(__privateGet(this, _Button_instances, isLink_get) ? void 0 : this.type)}"
         ?disabled="${this.disabled}"
         aria-label=${this.label || nothing}
-        href=${ifDefined(__privateGet(this, _isLink, isLink_get) ? this.href : void 0)}
-        target=${ifDefined(__privateGet(this, _isLink, isLink_get) ? this.target : void 0)}
-        rel=${ifDefined(__privateGet(this, _isLink, isLink_get) ? this.rel || __privateGet(this, _defaultRel, defaultRel_get) : void 0)}
-        download=${ifDefined(__privateGet(this, _isLink, isLink_get) ? this.download : void 0)}
+        href=${ifDefined(__privateGet(this, _Button_instances, isLink_get) ? this.href : void 0)}
+        target=${ifDefined(__privateGet(this, _Button_instances, isLink_get) ? this.target : void 0)}
+        rel=${ifDefined(__privateGet(this, _Button_instances, isLink_get) ? this.rel || __privateGet(this, _Button_instances, defaultRel_get) : void 0)}
+        download=${ifDefined(__privateGet(this, _Button_instances, isLink_get) ? this.download : void 0)}
         part="_button"
         @click="${__privateGet(this, _handleClick)}"
         ${forwardAttributes(
@@ -120,17 +120,16 @@ class Button extends GdsFormControlElement {
   }
 }
 _isIconButton = new WeakMap();
-_isLink = new WeakSet();
+_Button_instances = new WeakSet();
 isLink_get = function() {
   return this.href.length > 0;
 };
-_defaultRel = new WeakSet();
 defaultRel_get = function() {
   return this.target === "_blank" ? "noreferrer noopener" : void 0;
 };
 _mainSlotChange = new WeakMap();
 _handleClick = new WeakMap();
-Button.styles = [tokens, unsafeCSS(style)];
+Button.styles = [tokens, ButtonStyles];
 /**
  * @internal
  */

package/components/button/button.js

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.QTSIPXV3.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { GdsButton } from "./button.component.js";
 GdsButton.define();
 export {