@sebgroup/green-core 1.90.2 → 2.0.0

package/components/button/button.styles.js

@@ -0,0 +1,549 @@
+import "../../chunks/chunk.QU3DSPNU.js";
+import { css } from "lit";
+const style = css`
+  @layer tokens, core, a11y, ranks, sizes, variants, disabled;
+
+  @layer a11y {
+    @media (prefers-reduced-motion: reduce) {
+      .button {
+        transition: none;
+      }
+    }
+  }
+
+  @layer core {
+    :host {
+      display: inline-flex;
+      max-width: 100%;
+    }
+
+    .button {
+      --_block-size: var(--gds-sys-space-3xl);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      border: none;
+      cursor: pointer;
+      block-size: var(--_block-size);
+      background-color: var(--gds-sys-color-l3-neutral-01);
+      color: var(--gds-sys-color-content-neutral-03);
+      border-radius: var(--gds-sys-space-max);
+      font-family: inherit;
+      font: var(--gds-sys-text-detail-book-m);
+      gap: var(--gds-sys-space-s);
+      outline-color: transparent;
+      outline-offset: var(--gds-sys-space-3xs);
+      outline-style: solid;
+      outline-width: var(--gds-sys-space-3xs);
+      padding-block: var(--gds-sys-space-s);
+      padding-inline: var(--gds-sys-space-l);
+      position: relative;
+      text-decoration: none;
+      transition-property: color, border-colorm, background;
+      transition-duration: 0.2s;
+      flex: 1;
+
+      &:focus {
+        outline-color: var(--gds-sys-color-content-neutral-01);
+
+        &:not(:focus-visible) {
+          outline-color: transparent;
+        }
+      }
+
+      @media (pointer: fine) {
+        &:hover {
+          background-color: color-mix(
+            in srgb,
+            var(--gds-sys-color-l3-neutral-01),
+            var(--gds-sys-color-state-neutral-01)
+          );
+        }
+      }
+
+      &:active {
+        background-color: color-mix(
+          in srgb,
+          var(--gds-sys-color-l3-neutral-01),
+          var(--gds-sys-color-state-neutral-02)
+        );
+      }
+
+      &:not(.circle) slot:not([name]) {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  .button.circle {
+    aspect-ratio: 1 / 1;
+    padding: 0;
+    min-block-size: var(--_block-size);
+    min-inline-size: var(--_block-size);
+  }
+
+  .button:disabled {
+    pointer-events: none;
+    background-color: var(--gds-sys-color-l3-disabled-01);
+    color: var(--gds-sys-color-content-disabled-01);
+  }
+
+  @layer ranks {
+    :host([rank*='secondary']) .button {
+      background-color: var(--gds-sys-color-l3-neutral-02);
+      color: var(--gds-sys-color-content-neutral-01);
+
+      @media (pointer: fine) {
+        &:hover {
+          background-color: color-mix(
+            in srgb,
+            var(--gds-sys-color-l3-neutral-02),
+            var(--gds-sys-color-state-neutral-03)
+          );
+        }
+      }
+
+      &:active {
+        background-color: color-mix(
+          in srgb,
+          var(--gds-sys-color-l3-neutral-02),
+          var(--gds-sys-color-state-neutral-04)
+        );
+      }
+    }
+
+    :host([rank*='tertiary']) .button {
+      background-color: transparent;
+      color: var(--gds-sys-color-content-neutral-01);
+
+      @media (pointer: fine) {
+        &:hover {
+          background-color: color-mix(
+            in srgb,
+            transparent,
+            var(--gds-sys-color-state-neutral-05)
+          );
+        }
+      }
+
+      &:active {
+        background-color: color-mix(
+          in srgb,
+          transparent,
+          var(--gds-sys-color-state-neutral-06)
+        );
+      }
+    }
+  }
+
+  @layer sizes {
+    :host([size='xs']) .button {
+      --_block-size: var(--gds-sys-space-l);
+      font: var(--gds-sys-text-detail-book-s);
+      padding-inline: var(--gds-sys-space-m);
+    }
+
+    :host([size='small']) .button {
+      --_block-size: var(--gds-sys-space-xl);
+      font: var(--gds-sys-text-detail-book-s);
+      padding-block: var(--gds-sys-space-2xs);
+      padding-inline: var(--gds-sys-space-m);
+    }
+
+    :host([size='medium']) .button {
+      --_block-size: var(--gds-sys-space-2xl);
+      font: var(--gds-sys-text-detail-book-m);
+    }
+  }
+
+  @layer variants {
+    .brand {
+      background-color: var(--gds-sys-color-l3-brand-01);
+
+      &:focus {
+        outline-color: var(--gds-sys-color-content-brand-01);
+
+        &:not(:focus-visible) {
+          outline-color: transparent;
+        }
+      }
+
+      @media (pointer: fine) {
+        &:hover {
+          background-color: color-mix(
+            in srgb,
+            var(--gds-sys-color-l3-brand-01),
+            var(--gds-sys-color-state-brand-01)
+          );
+        }
+      }
+
+      &:active {
+        background-color: color-mix(
+          in srgb,
+          var(--gds-sys-color-l3-brand-01),
+          var(--gds-sys-color-state-brand-02)
+        );
+      }
+
+      &.secondary {
+        background-color: var(--gds-sys-color-l3-neutral-02);
+        color: var(--gds-sys-color-content-neutral-01);
+
+        @media (pointer: fine) {
+          &:hover {
+            background-color: color-mix(
+              in srgb,
+              var(--gds-sys-color-l3-neutral-02),
+              var(--gds-sys-color-state-brand-03)
+            );
+          }
+        }
+
+        &:active {
+          background-color: color-mix(
+            in srgb,
+            var(--gds-sys-color-l3-neutral-02),
+            var(--gds-sys-color-state-brand-04)
+          );
+        }
+      }
+
+      &.tertiary {
+        background-color: transparent;
+        color: var(--gds-sys-color-content-neutral-01);
+
+        @media (pointer: fine) {
+          &:hover {
+            background-color: color-mix(
+              in srgb,
+              transparent,
+              var(--gds-sys-color-state-brand-05)
+            );
+          }
+        }
+
+        &:active {
+          background-color: color-mix(
+            in srgb,
+            transparent,
+            var(--gds-sys-color-state-brand-06)
+          );
+        }
+      }
+    }
+
+    .positive {
+      background-color: var(--gds-sys-color-l3-positive-01);
+      color: var(--gds-sys-color-content-inversed);
+
+      &:focus {
+        outline-color: var(--gds-sys-color-content-positive-01);
+
+        &:not(:focus-visible) {
+          outline-color: transparent;
+        }
+      }
+
+      @media (pointer: fine) {
+        &:hover {
+          background-color: color-mix(
+            in srgb,
+            var(--gds-sys-color-l3-positive-01),
+            var(--gds-sys-color-state-positive-01)
+          );
+        }
+      }
+
+      &:active {
+        background-color: color-mix(
+          in srgb,
+          var(--gds-sys-color-l3-positive-01),
+          var(--gds-sys-color-state-positive-02)
+        );
+      }
+
+      &.secondary {
+        background-color: var(--gds-sys-color-l3-positive-02);
+        color: var(--gds-sys-color-content-positive-01);
+
+        @media (pointer: fine) {
+          &:hover {
+            background-color: color-mix(
+              in srgb,
+              var(--gds-sys-color-l3-positive-02),
+              var(--gds-sys-color-state-positive-03)
+            );
+          }
+        }
+
+        &:active {
+          background-color: color-mix(
+            in srgb,
+            var(--gds-sys-color-l3-positive-02),
+            var(--gds-sys-color-state-positive-04)
+          );
+        }
+      }
+
+      &.tertiary {
+        background-color: transparent;
+        color: var(--gds-sys-color-content-positive-01);
+
+        @media (pointer: fine) {
+          &:hover {
+            background-color: color-mix(
+              in srgb,
+              transparent,
+              var(--gds-sys-color-state-positive-05)
+            );
+          }
+        }
+
+        &:active {
+          background-color: color-mix(
+            in srgb,
+            transparent,
+            var(--gds-sys-color-state-positive-06)
+          );
+        }
+      }
+    }
+
+    .negative {
+      background-color: var(--gds-sys-color-l3-negative-01);
+      color: var(--gds-sys-color-content-inversed);
+
+      &:focus {
+        outline-color: var(--gds-sys-color-content-negative-01);
+        &:not(:focus-visible) {
+          outline-color: transparent;
+        }
+      }
+
+      @media (pointer: fine) {
+        &:hover {
+          background-color: color-mix(
+            in srgb,
+            var(--gds-sys-color-l3-negative-01),
+            var(--gds-sys-color-state-negative-01)
+          );
+        }
+      }
+
+      &:active {
+        background-color: color-mix(
+          in srgb,
+          var(--gds-sys-color-l3-negative-01),
+          var(--gds-sys-color-state-negative-02)
+        );
+      }
+
+      &.secondary {
+        background-color: var(--gds-sys-color-l3-negative-02);
+        color: var(--gds-sys-color-content-negative-01);
+
+        @media (pointer: fine) {
+          &:hover {
+            background-color: color-mix(
+              in srgb,
+              var(--gds-sys-color-l3-negative-02),
+              var(--gds-sys-color-state-negative-03)
+            );
+          }
+        }
+
+        &:active {
+          background-color: color-mix(
+            in srgb,
+            var(--gds-sys-color-l3-negative-02),
+            var(--gds-sys-color-state-negative-04)
+          );
+        }
+      }
+
+      &.tertiary {
+        background-color: transparent;
+        color: var(--gds-sys-color-content-negative-01);
+
+        @media (pointer: fine) {
+          &:hover {
+            background-color: color-mix(
+              in srgb,
+              transparent,
+              var(--gds-sys-color-state-negative-05)
+            );
+          }
+        }
+
+        &:active {
+          background-color: color-mix(
+            in srgb,
+            transparent,
+            var(--gds-sys-color-state-negative-06)
+          );
+        }
+      }
+    }
+
+    .notice {
+      background-color: var(--gds-sys-color-l3-notice-01);
+      color: var(--gds-sys-color-content-inversed);
+
+      &:focus {
+        outline-color: var(--gds-sys-color-content-notice-01);
+        &:not(:focus-visible) {
+          outline-color: transparent;
+        }
+      }
+
+      @media (pointer: fine) {
+        &:hover {
+          background-color: color-mix(
+            in srgb,
+            var(--gds-sys-color-l3-notice-01),
+            var(--gds-sys-color-state-notice-01)
+          );
+        }
+      }
+
+      &:active {
+        background-color: color-mix(
+          in srgb,
+          var(--gds-sys-color-l3-notice-01),
+          var(--gds-sys-color-state-notice-02)
+        );
+      }
+
+      &.secondary {
+        background-color: var(--gds-sys-color-l3-notice-02);
+        color: var(--gds-sys-color-content-notice-01);
+
+        @media (pointer: fine) {
+          &:hover {
+            background-color: color-mix(
+              in srgb,
+              var(--gds-sys-color-l3-notice-02),
+              var(--gds-sys-color-state-notice-03)
+            );
+          }
+        }
+
+        &:active {
+          background-color: color-mix(
+            in srgb,
+            var(--gds-sys-color-l3-notice-02),
+            var(--gds-sys-color-state-notice-04)
+          );
+        }
+      }
+
+      &.tertiary {
+        background-color: transparent;
+        color: var(--gds-sys-color-content-notice-01);
+
+        @media (pointer: fine) {
+          &:hover {
+            background-color: color-mix(
+              in srgb,
+              transparent,
+              var(--gds-sys-color-state-notice-05)
+            );
+          }
+        }
+
+        &:active {
+          background-color: color-mix(
+            in srgb,
+            transparent,
+            var(--gds-sys-color-state-notice-06)
+          );
+        }
+      }
+    }
+
+    .warning {
+      background-color: var(--gds-sys-color-l3-warning-01);
+      color: var(--gds-sys-color-content-neutral-03);
+
+      &:focus {
+        outline-color: var(--gds-sys-color-content-warning-01);
+        &:not(:focus-visible) {
+          outline-color: transparent;
+        }
+      }
+
+      @media (pointer: fine) {
+        &:hover {
+          background-color: color-mix(
+            in srgb,
+            var(--gds-sys-color-l3-warning-01),
+            var(--gds-sys-color-state-warning-01)
+          );
+        }
+      }
+
+      &:active {
+        background-color: color-mix(
+          in srgb,
+          var(--gds-sys-color-l3-warning-01),
+          var(--gds-sys-color-state-warning-02)
+        );
+      }
+
+      &.secondary {
+        background-color: var(--gds-sys-color-l3-warning-02);
+        color: var(--gds-sys-color-content-warning-01);
+
+        @media (pointer: fine) {
+          &:hover {
+            background-color: color-mix(
+              in srgb,
+              var(--gds-sys-color-l3-warning-02),
+              var(--gds-sys-color-state-warning-03)
+            );
+          }
+        }
+
+        &:active {
+          background-color: color-mix(
+            in srgb,
+            var(--gds-sys-color-l3-warning-02),
+            var(--gds-sys-color-state-warning-04)
+          );
+        }
+      }
+
+      &.tertiary {
+        background-color: transparent;
+        color: var(--gds-sys-color-content-warning-01);
+
+        @media (pointer: fine) {
+          &:hover {
+            background-color: color-mix(
+              in srgb,
+              transparent,
+              var(--gds-sys-color-state-warning-05)
+            );
+          }
+        }
+
+        &:active {
+          background-color: color-mix(
+            in srgb,
+            transparent,
+            var(--gds-sys-color-state-warning-06)
+          );
+        }
+      }
+    }
+  }
+`;
+var button_styles_default = style;
+export {
+  button_styles_default as default
+};

package/components/button/button.trans.styles.js

@@ -1,4 +1,4 @@
-import "../../chunks/chunk.QTSIPXV3.js";
+import "../../chunks/chunk.QU3DSPNU.js";
 import { TransitionalStyles } from "../../transitional-styles.js";
 import styles from "./button.trans.styles.scss.js";
 function register() {

package/components/calendar/calendar.component.d.ts

@@ -12,7 +12,7 @@ export type CustomizedDate = {
      */
     color?: string;
     /**
-     * The type of indicator.
+     * The type of indicator - `dot` is default.
      */
     indicator?: 'dot';
     /**
@@ -67,6 +67,10 @@ export declare class GdsCalendar extends GdsElement {
      */
     get focusedYear(): number;
     set focusedYear(year: number);
+    /**
+     * Sets the size of the grid. Defaults to "large".
+     */
+    size: 'small' | 'large';
     /**
      * Whether to show week numbers or not.
      */

package/components/calendar/calendar.component.js

@@ -2,8 +2,8 @@ import {
   __decorateClass,
   __privateAdd,
   __privateMethod
-} from "../../chunks/chunk.QTSIPXV3.js";
-var _setSelectedDate, setSelectedDate_fn, _handleKeyDown, handleKeyDown_fn;
+} from "../../chunks/chunk.QU3DSPNU.js";
+var _GdsCalendar_instances, setSelectedDate_fn, handleKeyDown_fn;
 import { localized, msg } from "@lit/localize";
 import { html } from "lit";
 import { property, query, state } from "lit/decorators.js";
@@ -25,17 +25,17 @@ import { gdsCustomElement } from "../../scoping.js";
 import { tokens } from "../../tokens.style.js";
 import { TransitionalStyles } from "../../transitional-styles.js";
 import { watch } from "../../utils/decorators/watch.js";
-import style from "./calendar.styles.js";
+import CalendarStyles from "./calendar.styles.js";
 import { renderMonthGridView } from "./functions.js";
 let GdsCalendar = class extends GdsElement {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _setSelectedDate);
-    __privateAdd(this, _handleKeyDown);
+    __privateAdd(this, _GdsCalendar_instances);
     this.min = new Date((/* @__PURE__ */ new Date()).getFullYear() - 10, 0, 1);
     this.max = new Date((/* @__PURE__ */ new Date()).getFullYear() + 10, 0, 1);
     this.focusedDate = /* @__PURE__ */ new Date();
     this.disabledWeekends = false;
+    this.size = "large";
     this.showWeekNumbers = false;
     this.hideExtraneousDays = false;
     this.hideDayNames = false;
@@ -77,7 +77,7 @@ let GdsCalendar = class extends GdsElement {
   connectedCallback() {
     super.connectedCallback();
     TransitionalStyles.instance.apply(this, "gds-calendar");
-    this.addEventListener("keydown", __privateMethod(this, _handleKeyDown, handleKeyDown_fn));
+    this.addEventListener("keydown", __privateMethod(this, _GdsCalendar_instances, handleKeyDown_fn));
     window.addEventListener("lit-localize-status", (e) => {
       if (e.detail.status === "ready")
         this._currentLocale = e.detail.readyLocale;
@@ -89,19 +89,26 @@ let GdsCalendar = class extends GdsElement {
   }
   render() {
     const currentDate = /* @__PURE__ */ new Date();
-    return html`<table role="grid" aria-label="${ifDefined(this.label)}">
+    return html`<table
+      role="grid"
+      aria-label="${ifDefined(this.label)}"
+      class="${classMap({
+      small: Boolean(this.size === "small"),
+      indicators: Boolean(this.customizedDates)
+    })}"
+    >
       ${when(
       !this.hideDayNames,
       () => html`<thead role="rowgroup">
             <tr role="row">
               ${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>
+              <th>${msg("Mon").substring(0, 1)}</th>
+              <th>${msg("Tue").substring(0, 1)}</th>
+              <th>${msg("Wed").substring(0, 1)}</th>
+              <th>${msg("Thu").substring(0, 1)}</th>
+              <th>${msg("Fri").substring(0, 1)}</th>
+              <th>${msg("Sat").substring(0, 1)}</th>
+              <th>${msg("Sun").substring(0, 1)}</th>
             </tr>
           </thead>`
     )}
@@ -148,6 +155,7 @@ let GdsCalendar = class extends GdsElement {
             isDisabled ? void 0 : "gridcell"
           )}"
                             class="${classMap({
+            small: Boolean(this.size === "small"),
             "custom-date": Boolean(customization),
             disabled: Boolean(isDisabled),
             today: isSameDay(currentDate, day)
@@ -156,7 +164,7 @@ let GdsCalendar = class extends GdsElement {
                             tabindex="${isSameDay(this.focusedDate, day) ? 0 : -1}"
                             aria-selected="${this.value && isSameDay(this.value, day) ? "true" : "false"}"
                             aria-label="${this.dateLabelTemplate(day)}"
-                            @click=${() => isDisabled ? null : __privateMethod(this, _setSelectedDate, setSelectedDate_fn).call(this, day)}
+                            @click=${() => isDisabled ? null : __privateMethod(this, _GdsCalendar_instances, setSelectedDate_fn).call(this, day)}
                             id="dateCell-${day.getDate()}"
                           >
                             <span
@@ -184,12 +192,11 @@ let GdsCalendar = class extends GdsElement {
     </table>`;
   }
   _valueChanged() {
-    if (!this.value)
-      return;
+    if (!this.value) return;
     this.focusedDate = new Date(this.value);
   }
 };
-_setSelectedDate = new WeakSet();
+_GdsCalendar_instances = new WeakSet();
 setSelectedDate_fn = function(date) {
   const dateOnMidDay = setHours(date, 12);
   this.value = dateOnMidDay;
@@ -199,7 +206,6 @@ setSelectedDate_fn = function(date) {
     composed: false
   });
 };
-_handleKeyDown = new WeakSet();
 handleKeyDown_fn = function(e) {
   let handled = false;
   let newFocusedDate = new Date(this.focusedDate);
@@ -217,7 +223,7 @@ handleKeyDown_fn = function(e) {
     handled = true;
   } else if (e.key === "Enter" || e.key === " ") {
     if (!this._elFocusedCell?.hasAttribute("disabled")) {
-      __privateMethod(this, _setSelectedDate, setSelectedDate_fn).call(this, this.focusedDate);
+      __privateMethod(this, _GdsCalendar_instances, setSelectedDate_fn).call(this, this.focusedDate);
     }
     handled = true;
   } else if (e.key === "Home") {
@@ -251,7 +257,7 @@ handleKeyDown_fn = function(e) {
     });
   }
 };
-GdsCalendar.styles = [tokens, style];
+GdsCalendar.styles = [tokens, CalendarStyles];
 GdsCalendar.shadowRootOptions = {
   mode: "open",
   delegatesFocus: true
@@ -280,6 +286,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Number })
 ], GdsCalendar.prototype, "focusedYear", 1);
+__decorateClass([
+  property({ reflect: true })
+], GdsCalendar.prototype, "size", 2);
 __decorateClass([
   property({ type: Boolean })
 ], GdsCalendar.prototype, "showWeekNumbers", 2);