@sebgroup/green-core 2.16.1 → 2.17.0-rc.20251204205214555

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/button/button.trans.styles.scss.js

@@ -1,2 +1,2 @@
-const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\ni.sg-icon {\n  font-size: 0;\n  width: 1rem;\n  height: 1rem;\n  display: inline-block;\n}\ni.sg-icon::before {\n  content: \"\";\n  display: inline-block;\n  background: var(--color);\n  width: 100%;\n  height: 100%;\n  -webkit-mask-repeat: no-repeat;\n          mask-repeat: no-repeat;\n}\ni.sg-icon.sg-icon-calendar::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-calendar-range::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-ellipsis::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-grip-vertical::before {\n  -webkit-mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-next::before {\n  background: none;\n  border-bottom: 2px solid;\n  border-left: 2px solid;\n  content: \"\";\n  display: block;\n  height: 12px;\n  margin-left: -10px;\n  margin-top: 2px;\n  transform: translate(75%) rotate(-135deg) scaleZ(-1);\n  transition: transform 0.3s ease-in;\n  width: 12px;\n}\ni.sg-icon.sg-icon-previous::before {\n  background: none;\n  border-bottom: 2px solid;\n  border-left: 2px solid;\n  content: \"\";\n  display: block;\n  height: 12px;\n  margin-left: -4px;\n  margin-top: 2px;\n  transform: translate(75%) rotate(45deg) scaleZ(-1);\n  transition: transform 0.3s ease-in;\n  width: 12px;\n}\ni.sg-icon.sg-icon-ellipsis::before {\n  margin-right: -2px;\n}\n\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  @layer _base, _ranks, _overrides;\n  :host {\n    display: inline-block;\n  }\n  @layer _base {\n    .button {\n      background-color: transparent;\n      border: 0;\n      cursor: pointer;\n      font-family: inherit;\n      padding: 0;\n      padding-left: 1rem;\n      padding-right: 1rem;\n      padding-bottom: 0.75rem;\n      padding-top: 0.75rem;\n      border-radius: var(--sg-border-radius);\n      border: solid var(--sg-border-width) var(--sg-border-color);\n      font-weight: 500;\n      min-height: 2.75rem;\n      align-items: center;\n      display: inline-flex;\n      justify-content: center;\n      box-sizing: border-box;\n      font-size: inherit;\n      overflow: hidden;\n      display: flex;\n      gap: 0.5rem;\n      text-decoration: none;\n      width: 100%;\n    }\n    .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    .button:focus, .button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    @media (max-width: 35.98em) {\n      .button {\n        min-width: 100%;\n      }\n    }\n    @media screen and (-ms-high-contrast: active) {\n      .button {\n        border: 2px solid currentcolor;\n      }\n    }\n    .button.small {\n      min-height: 2rem;\n      padding: 0.4375rem 0.75rem;\n      font-size: 0.875rem;\n      line-height: 1rem;\n    }\n    .button.large {\n      min-height: 4rem;\n      padding: 1rem 1.5rem;\n      font-size: 1.5rem;\n      line-height: 2rem;\n    }\n    .button slot:not([name]) {\n      display: inline-block;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    :host(:not([variant=ghost])) .button {\n      transition: border 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n      background: rgb(0, 122, 199);\n      border-color: rgb(0, 122, 199);\n      color: #fff;\n      --color: #fff;\n    }\n    :host(:not([variant=ghost])) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      color: rgb(255, 255, 255);\n      --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n    }\n    :host(:not([variant=ghost])) .button[aria-selected=true], :host(:not([variant=ghost])) .button:active, :host(:not([variant=ghost])) .button.active, :host(:not([variant=ghost])) .button.active:hover, :host(:not([variant=ghost])) .button:active:hover {\n      background-color: rgb(0, 122, 199);\n      color: rgb(255, 255, 255);\n      --background: rgb(0, 122, 199);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(0, 122, 199);\n    }\n    :host(:not([variant=ghost])) .button:focus-visible {\n      background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      color: rgb(255, 255, 255);\n      --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(25.4035777564, 154.8940067842, 227.221994169) !important;\n    }\n    :host(:not([variant=ghost])) .button:disabled, :host(:not([variant=ghost])) .button.disabled, :host(:not([variant=ghost])) .button[aria-disabled=true] {\n      background: var(--form-control-primary-bg-disabled) !important;\n      color: var(--text-primary-disabled-color) !important;\n      border-color: var(--border-primary-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    :host(:not([variant=ghost])) .button:disabled::-moz-placeholder, :host(:not([variant=ghost])) .button.disabled::-moz-placeholder, :host(:not([variant=ghost])) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host(:not([variant=ghost])) .button:disabled::placeholder, :host(:not([variant=ghost])) .button.disabled::placeholder, :host(:not([variant=ghost])) .button[aria-disabled=true]::placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([rank*=secondary]) .button {\n      transition: border 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n      background: transparent;\n      border-color: rgb(0, 122, 199);\n      color: rgb(0, 122, 199);\n      --color: rgb(0, 122, 199);\n    }\n    :host([rank*=secondary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([rank*=secondary]) .button:focus, :host([rank*=secondary]) .button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    :host([rank*=secondary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      color: rgb(255, 255, 255);\n      --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n    }\n    :host([rank*=secondary]) .button[aria-selected=true], :host([rank*=secondary]) .button:active, :host([rank*=secondary]) .button.active, :host([rank*=secondary]) .button.active:hover, :host([rank*=secondary]) .button:active:hover {\n      background-color: rgb(0, 122, 199);\n      color: rgb(255, 255, 255);\n      --background: rgb(0, 122, 199);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(0, 122, 199);\n    }\n    :host([rank*=secondary]) .button:disabled, :host([rank*=secondary]) .button.disabled, :host([rank*=secondary]) .button[aria-disabled=true] {\n      background: var(--sg-form-control-bg-disabled) !important;\n      color: var(--text-disabled-color) !important;\n      border-color: var(--border-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    :host([rank*=secondary]) .button:disabled::-moz-placeholder, :host([rank*=secondary]) .button.disabled::-moz-placeholder, :host([rank*=secondary]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([rank*=secondary]) .button:disabled::placeholder, :host([rank*=secondary]) .button.disabled::placeholder, :host([rank*=secondary]) .button[aria-disabled=true]::placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([rank*=tertiary]) .button {\n      transition: border 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n      background: transparent;\n      border-color: transparent;\n      color: rgb(0, 122, 199);\n      --color: rgb(0, 122, 199);\n    }\n    :host([rank*=tertiary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([rank*=tertiary]) .button:focus, :host([rank*=tertiary]) .button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    :host([rank*=tertiary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      color: rgb(255, 255, 255);\n      --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n    }\n    :host([rank*=tertiary]) .button[aria-selected=true], :host([rank*=tertiary]) .button:active, :host([rank*=tertiary]) .button.active, :host([rank*=tertiary]) .button.active:hover, :host([rank*=tertiary]) .button:active:hover {\n      background-color: rgb(0, 122, 199);\n      color: rgb(255, 255, 255);\n      --background: rgb(0, 122, 199);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(0, 122, 199);\n    }\n    :host([rank*=tertiary]) .button:disabled, :host([rank*=tertiary]) .button.disabled, :host([rank*=tertiary]) .button[aria-disabled=true] {\n      background: var(--sg-form-control-bg-disabled) !important;\n      color: var(--text-disabled-color) !important;\n      border-color: var(--border-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    :host([rank*=tertiary]) .button:disabled::-moz-placeholder, :host([rank*=tertiary]) .button.disabled::-moz-placeholder, :host([rank*=tertiary]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([rank*=tertiary]) .button:disabled::placeholder, :host([rank*=tertiary]) .button.disabled::placeholder, :host([rank*=tertiary]) .button[aria-disabled=true]::placeholder {\n      color: var(--text-disabled-color);\n    }\n    /* stylelint-disable */\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button,\n    :host([variant=negative][rank=primary]) .button {\n      background: rgb(187, 0, 12);\n      border-color: rgb(187, 0, 12);\n      color: #fff;\n      --color: #fff;\n      transition: border 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:not(:disabled, .disabled, [aria-disabled]):hover,\n    :host([variant=negative][rank=primary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(216, 26, 26);\n      color: rgb(255, 255, 255);\n      --background: rgb(216, 26, 26);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(216, 26, 26);\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-selected=true], :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active:hover,\n    :host([variant=negative][rank=primary]) .button[aria-selected=true],\n    :host([variant=negative][rank=primary]) .button:active,\n    :host([variant=negative][rank=primary]) .button.active,\n    :host([variant=negative][rank=primary]) .button.active:hover,\n    :host([variant=negative][rank=primary]) .button:active:hover {\n      background-color: rgb(187, 0, 12);\n      color: rgb(255, 255, 255);\n      --background: rgb(187, 0, 12);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(187, 0, 12);\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-selected]:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active:hover,\n    :host([variant=negative][rank=primary]) .button[aria-selected]:hover,\n    :host([variant=negative][rank=primary]) .button.active:hover,\n    :host([variant=negative][rank=primary]) .button:active:hover {\n      opacity: 0.9;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus:not(:focus-visible),\n    :host([variant=negative][rank=primary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus-visible,\n    :host([variant=negative][rank=primary]) .button:focus,\n    :host([variant=negative][rank=primary]) .button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true],\n    :host([variant=negative][rank=primary]) .button:disabled,\n    :host([variant=negative][rank=primary]) .button.disabled,\n    :host([variant=negative][rank=primary]) .button[aria-disabled=true] {\n      background: var(--form-control-primary-bg-disabled) !important;\n      color: var(--text-primary-disabled-color) !important;\n      border-color: var(--border-primary-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled::-moz-placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled::-moz-placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true]::-moz-placeholder, :host([variant=negative][rank=primary]) .button:disabled::-moz-placeholder, :host([variant=negative][rank=primary]) .button.disabled::-moz-placeholder, :host([variant=negative][rank=primary]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled::placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled::placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true]::placeholder,\n    :host([variant=negative][rank=primary]) .button:disabled::placeholder,\n    :host([variant=negative][rank=primary]) .button.disabled::placeholder,\n    :host([variant=negative][rank=primary]) .button[aria-disabled=true]::placeholder {\n      color: var(--text-disabled-color);\n    }\n    /* stylelint-enable */\n    :host([variant=negative][rank=secondary]) .button,\n    :host([variant=negative][rank=tertiary]) .button {\n      color: rgb(187, 0, 12);\n      --color: rgb(187, 0, 12);\n      border-color: transparent;\n      transition: border 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n    }\n    :host([variant=negative][rank=secondary]) .button:not(:disabled, .disabled, [aria-disabled]):hover,\n    :host([variant=negative][rank=tertiary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(216, 26, 26);\n      color: rgb(255, 255, 255);\n      --background: rgb(216, 26, 26);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(216, 26, 26);\n    }\n    :host([variant=negative][rank=secondary]) .button[aria-selected=true], :host([variant=negative][rank=secondary]) .button:active, :host([variant=negative][rank=secondary]) .button.active, :host([variant=negative][rank=secondary]) .button.active:hover, :host([variant=negative][rank=secondary]) .button:active:hover,\n    :host([variant=negative][rank=tertiary]) .button[aria-selected=true],\n    :host([variant=negative][rank=tertiary]) .button:active,\n    :host([variant=negative][rank=tertiary]) .button.active,\n    :host([variant=negative][rank=tertiary]) .button.active:hover,\n    :host([variant=negative][rank=tertiary]) .button:active:hover {\n      background-color: rgb(187, 0, 12);\n      color: rgb(255, 255, 255);\n      --background: rgb(187, 0, 12);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(187, 0, 12);\n    }\n    :host([variant=negative][rank=secondary]) .button[aria-selected]:hover, :host([variant=negative][rank=secondary]) .button.active:hover, :host([variant=negative][rank=secondary]) .button:active:hover,\n    :host([variant=negative][rank=tertiary]) .button[aria-selected]:hover,\n    :host([variant=negative][rank=tertiary]) .button.active:hover,\n    :host([variant=negative][rank=tertiary]) .button:active:hover {\n      opacity: 0.9;\n    }\n    :host([variant=negative][rank=secondary]) .button:focus:not(:focus-visible),\n    :host([variant=negative][rank=tertiary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([variant=negative][rank=secondary]) .button:focus, :host([variant=negative][rank=secondary]) .button:focus-visible,\n    :host([variant=negative][rank=tertiary]) .button:focus,\n    :host([variant=negative][rank=tertiary]) .button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    :host([variant=negative][rank=secondary]) .button {\n      border-color: rgb(187, 0, 12);\n    }\n    :host([variant=ghost]) .button {\n      transition: border 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n      border-color: rgb(51, 51, 51);\n      color: rgb(51, 51, 51);\n      --color: rgb(51, 51, 51);\n    }\n    :host([variant=ghost]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(51, 51, 51);\n      color: rgb(255, 255, 255);\n      --background: rgb(51, 51, 51);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(51, 51, 51);\n    }\n    :host([variant=ghost]) .button[aria-selected=true], :host([variant=ghost]) .button:active, :host([variant=ghost]) .button.active, :host([variant=ghost]) .button.active:hover, :host([variant=ghost]) .button:active:hover {\n      background-color: rgb(51, 51, 51);\n      color: rgb(255, 255, 255);\n      --background: rgb(51, 51, 51);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(51, 51, 51);\n    }\n    :host([variant=ghost]) .button[aria-selected]:hover, :host([variant=ghost]) .button.active:hover, :host([variant=ghost]) .button:active:hover {\n      opacity: 0.9;\n    }\n    :host([variant=ghost]) .button:focus-visible {\n      background-color: rgb(51, 51, 51);\n      color: rgb(255, 255, 255);\n      --background: rgb(51, 51, 51);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(51, 51, 51) !important;\n    }\n    :host([variant=ghost]) .button:disabled, :host([variant=ghost]) .button.disabled, :host([variant=ghost]) .button[aria-disabled=true] {\n      color: var(--text-disabled-color) !important;\n      border-color: var(--border-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    :host([variant=ghost]) .button:disabled::-moz-placeholder, :host([variant=ghost]) .button.disabled::-moz-placeholder, :host([variant=ghost]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([variant=ghost]) .button:disabled::placeholder, :host([variant=ghost]) .button.disabled::placeholder, :host([variant=ghost]) .button[aria-disabled=true]::placeholder {\n      color: var(--text-disabled-color);\n    }\n  }\n  @layer _overrides {\n    :host .button.icon {\n      padding: 0.75rem;\n      background: transparent;\n      border-width: 0px;\n      color: currentColor;\n    }\n    :host .button.icon:hover {\n      color: currentColor;\n      background: var(--grey-500);\n    }\n    :host .button.icon slot {\n      display: contents;\n    }\n    .button.icon.xs {\n      min-height: 1.5rem;\n      line-height: 0.75rem;\n      padding: 0.25rem;\n    }\n    .button.icon.small {\n      padding: 0.5rem;\n    }\n    .button.icon.large {\n      padding: 1rem;\n    }\n  }\n}";
+const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\ni.sg-icon {\n  font-size: 0;\n  width: 1rem;\n  height: 1rem;\n  display: inline-block;\n}\ni.sg-icon::before {\n  content: \"\";\n  display: inline-block;\n  background: var(--color);\n  width: 100%;\n  height: 100%;\n  -webkit-mask-repeat: no-repeat;\n          mask-repeat: no-repeat;\n}\ni.sg-icon.sg-icon-calendar::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-calendar-range::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-ellipsis::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-grip-vertical::before {\n  -webkit-mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-next::before {\n  background: none;\n  border-bottom: 2px solid;\n  border-left: 2px solid;\n  content: \"\";\n  display: block;\n  height: 12px;\n  margin-left: -10px;\n  margin-top: 2px;\n  transform: translate(75%) rotate(-135deg) scaleZ(-1);\n  transition: transform 0.3s ease-in;\n  width: 12px;\n}\ni.sg-icon.sg-icon-previous::before {\n  background: none;\n  border-bottom: 2px solid;\n  border-left: 2px solid;\n  content: \"\";\n  display: block;\n  height: 12px;\n  margin-left: -4px;\n  margin-top: 2px;\n  transform: translate(75%) rotate(45deg) scaleZ(-1);\n  transition: transform 0.3s ease-in;\n  width: 12px;\n}\ni.sg-icon.sg-icon-ellipsis::before {\n  margin-right: -2px;\n}\n\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  @layer _base, _ranks, _overrides;\n  :host {\n    display: inline-block;\n  }\n  @layer _base {\n    .button {\n      background-color: transparent;\n      border: 0;\n      cursor: pointer;\n      font-family: inherit;\n      padding: 0;\n      padding-left: 1rem;\n      padding-right: 1rem;\n      padding-bottom: 0.75rem;\n      padding-top: 0.75rem;\n      border-radius: var(--sg-border-radius);\n      border: solid var(--sg-border-width) var(--sg-border-color);\n      font-weight: 500;\n    }\n    .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    .button:focus, .button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    .button {\n      min-height: 2.75rem;\n      align-items: center;\n      display: inline-flex;\n      justify-content: center;\n    }\n    @media (max-width: 35.98em) {\n      .button {\n        min-width: 100%;\n      }\n    }\n    @media screen and (-ms-high-contrast: active) {\n      .button {\n        border: 2px solid currentcolor;\n      }\n    }\n    .button.small {\n      min-height: 2rem;\n      padding: 0.4375rem 0.75rem;\n      font-size: 0.875rem;\n      line-height: 1rem;\n    }\n    .button.large {\n      min-height: 4rem;\n      padding: 1rem 1.5rem;\n      font-size: 1.5rem;\n      line-height: 2rem;\n    }\n    .button {\n      box-sizing: border-box;\n      font-size: inherit;\n      overflow: hidden;\n      display: flex;\n      gap: 0.5rem;\n      text-decoration: none;\n      width: 100%;\n    }\n    .button slot:not([name]) {\n      display: inline-block;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    :host(:not([variant=ghost])) .button {\n      transition: border 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n    }\n    :host(:not([variant=ghost])) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      color: rgb(255, 255, 255);\n      --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n    }\n    :host(:not([variant=ghost])) .button[aria-selected=true], :host(:not([variant=ghost])) .button:active, :host(:not([variant=ghost])) .button.active, :host(:not([variant=ghost])) .button.active:hover, :host(:not([variant=ghost])) .button:active:hover {\n      background-color: rgb(0, 122, 199);\n      color: rgb(255, 255, 255);\n      --background: rgb(0, 122, 199);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(0, 122, 199);\n    }\n    :host(:not([variant=ghost])) .button:focus-visible {\n      background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      color: rgb(255, 255, 255);\n      --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(25.4035777564, 154.8940067842, 227.221994169) !important;\n    }\n    :host(:not([variant=ghost])) .button {\n      background: rgb(0, 122, 199);\n      border-color: rgb(0, 122, 199);\n      color: #fff;\n      --color: #fff;\n    }\n    :host(:not([variant=ghost])) .button:disabled, :host(:not([variant=ghost])) .button.disabled, :host(:not([variant=ghost])) .button[aria-disabled=true] {\n      background: var(--form-control-primary-bg-disabled) !important;\n      color: var(--text-primary-disabled-color) !important;\n      border-color: var(--border-primary-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    :host(:not([variant=ghost])) .button:disabled::-moz-placeholder, :host(:not([variant=ghost])) .button.disabled::-moz-placeholder, :host(:not([variant=ghost])) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host(:not([variant=ghost])) .button:disabled::placeholder, :host(:not([variant=ghost])) .button.disabled::placeholder, :host(:not([variant=ghost])) .button[aria-disabled=true]::placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([rank*=secondary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([rank*=secondary]) .button:focus, :host([rank*=secondary]) .button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    :host([rank*=secondary]) .button {\n      transition: border 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n    }\n    :host([rank*=secondary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      color: rgb(255, 255, 255);\n      --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n    }\n    :host([rank*=secondary]) .button[aria-selected=true], :host([rank*=secondary]) .button:active, :host([rank*=secondary]) .button.active, :host([rank*=secondary]) .button.active:hover, :host([rank*=secondary]) .button:active:hover {\n      background-color: rgb(0, 122, 199);\n      color: rgb(255, 255, 255);\n      --background: rgb(0, 122, 199);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(0, 122, 199);\n    }\n    :host([rank*=secondary]) .button {\n      background: transparent;\n      border-color: rgb(0, 122, 199);\n      color: rgb(0, 122, 199);\n      --color: rgb(0, 122, 199);\n    }\n    :host([rank*=secondary]) .button:disabled, :host([rank*=secondary]) .button.disabled, :host([rank*=secondary]) .button[aria-disabled=true] {\n      background: var(--sg-form-control-bg-disabled) !important;\n      color: var(--text-disabled-color) !important;\n      border-color: var(--border-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    :host([rank*=secondary]) .button:disabled::-moz-placeholder, :host([rank*=secondary]) .button.disabled::-moz-placeholder, :host([rank*=secondary]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([rank*=secondary]) .button:disabled::placeholder, :host([rank*=secondary]) .button.disabled::placeholder, :host([rank*=secondary]) .button[aria-disabled=true]::placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([rank*=tertiary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([rank*=tertiary]) .button:focus, :host([rank*=tertiary]) .button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    :host([rank*=tertiary]) .button {\n      transition: border 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n    }\n    :host([rank*=tertiary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      color: rgb(255, 255, 255);\n      --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n    }\n    :host([rank*=tertiary]) .button[aria-selected=true], :host([rank*=tertiary]) .button:active, :host([rank*=tertiary]) .button.active, :host([rank*=tertiary]) .button.active:hover, :host([rank*=tertiary]) .button:active:hover {\n      background-color: rgb(0, 122, 199);\n      color: rgb(255, 255, 255);\n      --background: rgb(0, 122, 199);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(0, 122, 199);\n    }\n    :host([rank*=tertiary]) .button {\n      background: transparent;\n      border-color: transparent;\n      color: rgb(0, 122, 199);\n      --color: rgb(0, 122, 199);\n    }\n    :host([rank*=tertiary]) .button:disabled, :host([rank*=tertiary]) .button.disabled, :host([rank*=tertiary]) .button[aria-disabled=true] {\n      background: var(--sg-form-control-bg-disabled) !important;\n      color: var(--text-disabled-color) !important;\n      border-color: var(--border-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    :host([rank*=tertiary]) .button:disabled::-moz-placeholder, :host([rank*=tertiary]) .button.disabled::-moz-placeholder, :host([rank*=tertiary]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([rank*=tertiary]) .button:disabled::placeholder, :host([rank*=tertiary]) .button.disabled::placeholder, :host([rank*=tertiary]) .button[aria-disabled=true]::placeholder {\n      color: var(--text-disabled-color);\n    }\n    /* stylelint-disable */\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button,\n    :host([variant=negative][rank=primary]) .button {\n      background: rgb(187, 0, 12);\n      border-color: rgb(187, 0, 12);\n      color: #fff;\n      --color: #fff;\n      transition: border 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:not(:disabled, .disabled, [aria-disabled]):hover,\n    :host([variant=negative][rank=primary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(216, 26, 26);\n      color: rgb(255, 255, 255);\n      --background: rgb(216, 26, 26);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(216, 26, 26);\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-selected=true], :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active:hover,\n    :host([variant=negative][rank=primary]) .button[aria-selected=true],\n    :host([variant=negative][rank=primary]) .button:active,\n    :host([variant=negative][rank=primary]) .button.active,\n    :host([variant=negative][rank=primary]) .button.active:hover,\n    :host([variant=negative][rank=primary]) .button:active:hover {\n      background-color: rgb(187, 0, 12);\n      color: rgb(255, 255, 255);\n      --background: rgb(187, 0, 12);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(187, 0, 12);\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-selected]:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active:hover,\n    :host([variant=negative][rank=primary]) .button[aria-selected]:hover,\n    :host([variant=negative][rank=primary]) .button.active:hover,\n    :host([variant=negative][rank=primary]) .button:active:hover {\n      opacity: 0.9;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus:not(:focus-visible),\n    :host([variant=negative][rank=primary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus-visible,\n    :host([variant=negative][rank=primary]) .button:focus,\n    :host([variant=negative][rank=primary]) .button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true],\n    :host([variant=negative][rank=primary]) .button:disabled,\n    :host([variant=negative][rank=primary]) .button.disabled,\n    :host([variant=negative][rank=primary]) .button[aria-disabled=true] {\n      background: var(--form-control-primary-bg-disabled) !important;\n      color: var(--text-primary-disabled-color) !important;\n      border-color: var(--border-primary-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled::-moz-placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled::-moz-placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true]::-moz-placeholder, :host([variant=negative][rank=primary]) .button:disabled::-moz-placeholder, :host([variant=negative][rank=primary]) .button.disabled::-moz-placeholder, :host([variant=negative][rank=primary]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled::placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled::placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true]::placeholder,\n    :host([variant=negative][rank=primary]) .button:disabled::placeholder,\n    :host([variant=negative][rank=primary]) .button.disabled::placeholder,\n    :host([variant=negative][rank=primary]) .button[aria-disabled=true]::placeholder {\n      color: var(--text-disabled-color);\n    }\n    /* stylelint-enable */\n    :host([variant=negative][rank=secondary]) .button,\n    :host([variant=negative][rank=tertiary]) .button {\n      color: rgb(187, 0, 12);\n      --color: rgb(187, 0, 12);\n      border-color: transparent;\n      transition: border 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n    }\n    :host([variant=negative][rank=secondary]) .button:not(:disabled, .disabled, [aria-disabled]):hover,\n    :host([variant=negative][rank=tertiary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(216, 26, 26);\n      color: rgb(255, 255, 255);\n      --background: rgb(216, 26, 26);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(216, 26, 26);\n    }\n    :host([variant=negative][rank=secondary]) .button[aria-selected=true], :host([variant=negative][rank=secondary]) .button:active, :host([variant=negative][rank=secondary]) .button.active, :host([variant=negative][rank=secondary]) .button.active:hover, :host([variant=negative][rank=secondary]) .button:active:hover,\n    :host([variant=negative][rank=tertiary]) .button[aria-selected=true],\n    :host([variant=negative][rank=tertiary]) .button:active,\n    :host([variant=negative][rank=tertiary]) .button.active,\n    :host([variant=negative][rank=tertiary]) .button.active:hover,\n    :host([variant=negative][rank=tertiary]) .button:active:hover {\n      background-color: rgb(187, 0, 12);\n      color: rgb(255, 255, 255);\n      --background: rgb(187, 0, 12);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(187, 0, 12);\n    }\n    :host([variant=negative][rank=secondary]) .button[aria-selected]:hover, :host([variant=negative][rank=secondary]) .button.active:hover, :host([variant=negative][rank=secondary]) .button:active:hover,\n    :host([variant=negative][rank=tertiary]) .button[aria-selected]:hover,\n    :host([variant=negative][rank=tertiary]) .button.active:hover,\n    :host([variant=negative][rank=tertiary]) .button:active:hover {\n      opacity: 0.9;\n    }\n    :host([variant=negative][rank=secondary]) .button:focus:not(:focus-visible),\n    :host([variant=negative][rank=tertiary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([variant=negative][rank=secondary]) .button:focus, :host([variant=negative][rank=secondary]) .button:focus-visible,\n    :host([variant=negative][rank=tertiary]) .button:focus,\n    :host([variant=negative][rank=tertiary]) .button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    :host([variant=negative][rank=secondary]) .button {\n      border-color: rgb(187, 0, 12);\n    }\n    :host([variant=ghost]) .button {\n      transition: border 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n    }\n    :host([variant=ghost]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(51, 51, 51);\n      color: rgb(255, 255, 255);\n      --background: rgb(51, 51, 51);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(51, 51, 51);\n    }\n    :host([variant=ghost]) .button[aria-selected=true], :host([variant=ghost]) .button:active, :host([variant=ghost]) .button.active, :host([variant=ghost]) .button.active:hover, :host([variant=ghost]) .button:active:hover {\n      background-color: rgb(51, 51, 51);\n      color: rgb(255, 255, 255);\n      --background: rgb(51, 51, 51);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(51, 51, 51);\n    }\n    :host([variant=ghost]) .button[aria-selected]:hover, :host([variant=ghost]) .button.active:hover, :host([variant=ghost]) .button:active:hover {\n      opacity: 0.9;\n    }\n    :host([variant=ghost]) .button:focus-visible {\n      background-color: rgb(51, 51, 51);\n      color: rgb(255, 255, 255);\n      --background: rgb(51, 51, 51);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(51, 51, 51) !important;\n    }\n    :host([variant=ghost]) .button {\n      border-color: rgb(51, 51, 51);\n      color: rgb(51, 51, 51);\n      --color: rgb(51, 51, 51);\n    }\n    :host([variant=ghost]) .button:disabled, :host([variant=ghost]) .button.disabled, :host([variant=ghost]) .button[aria-disabled=true] {\n      color: var(--text-disabled-color) !important;\n      border-color: var(--border-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    :host([variant=ghost]) .button:disabled::-moz-placeholder, :host([variant=ghost]) .button.disabled::-moz-placeholder, :host([variant=ghost]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([variant=ghost]) .button:disabled::placeholder, :host([variant=ghost]) .button.disabled::placeholder, :host([variant=ghost]) .button[aria-disabled=true]::placeholder {\n      color: var(--text-disabled-color);\n    }\n  }\n  @layer _overrides {\n    :host .button.icon {\n      padding: 0.75rem;\n      background: transparent;\n      border-width: 0px;\n      color: currentColor;\n    }\n    :host .button.icon:hover {\n      color: currentColor;\n      background: var(--grey-500);\n    }\n    :host .button.icon slot {\n      display: contents;\n    }\n    .button.icon.xs {\n      min-height: 1.5rem;\n      line-height: 0.75rem;\n      padding: 0.25rem;\n    }\n    .button.icon.small {\n      padding: 0.5rem;\n    }\n    .button.icon.large {\n      padding: 1rem;\n    }\n  }\n}";
 export default styles;

package/components/calendar/calendar.trans.styles.scss.js

@@ -1,2 +1,2 @@
-const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n/* medium */\n/* regular */\n/* regular */\n/* regular */\n/* hover */\n/* focus */\n/* selected */\n/* highlighted */\n/* active */\n/* disabled */\n/* today */\n/* weekend */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  @layer _base {\n    :host {\n      display: flex;\n      justify-content: center;\n    }\n    @media (max-width: 35.98em) {\n      :host {\n        flex-wrap: wrap;\n        overflow-y: auto;\n      }\n    }\n    :host table {\n      border-spacing: 0;\n    }\n    :host th,\n    :host td {\n      box-sizing: border-box;\n      height: 2.75rem;\n      text-align: center;\n      width: 2.75rem;\n    }\n    :host thead {\n      /* days */\n    }\n    :host thead th {\n      background: var(--sg-bg-level-2);\n      border-bottom: solid 1px var(--sg-grey-300);\n      font-weight: 400;\n      top: 0;\n    }\n    @media (max-width: 35.98em) {\n      :host thead th {\n        position: sticky;\n      }\n    }\n    :host tbody {\n      /* week numbers */\n      /* dates */\n    }\n    :host tbody th {\n      font-weight: 400;\n    }\n    :host tbody td {\n      border: solid 1px transparent;\n      font-weight: 500;\n      -webkit-user-select: none;\n         -moz-user-select: none;\n              user-select: none;\n      /* weekend */\n      /* today */\n      /* hover */\n      /* focus */\n      /* selected */\n      /* highlighted */\n      /* active (pressed) */\n      /* disabled */\n    }\n    :host tbody td.sg-date-holiday:not(.disabled) {\n      background: var(--sg-bg-level-2);\n      color: hsl(var(--sg-hsl-red-2));\n    }\n    :host tbody td.today {\n      background: transparent;\n      border-radius: 4px;\n      box-shadow: inset 0 0 0 2px var(--grey-1000);\n      color: var(--grey-1000);\n    }\n    :host tbody td:hover:not(.disabled) {\n      background: var(--grey-500);\n      border: solid 1px var(--sg-bg-level-2);\n      border-radius: 4px;\n      color: var(--gds-sys-color-font);\n      cursor: pointer;\n    }\n    :host tbody td:focus-visible:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host tbody td:focus-visible:focus, :host tbody td:focus-visible:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    :host tbody td:focus-visible:not(.disabled) {\n      border: solid 1px var(--sg-bg-level-2);\n      border-radius: 4px;\n      cursor: pointer;\n      position: relative;\n      z-index: 0;\n    }\n    :host tbody td[aria-selected=true] {\n      background: var(--grey-1000);\n      border: solid 1px var(--sg-bg-level-2);\n      border-radius: 4px;\n      color: hsl(var(--sg-hsl-white));\n    }\n    :host tbody td[tabindex=\"0\"] {\n      border-radius: 4px;\n    }\n    :host tbody td:hover:active:not(.disabled) {\n      background: var(--grey-1000);\n      border: solid 1px var(--sg-bg-level-2);\n      border-radius: 4px;\n      color: hsl(var(--sg-hsl-white));\n    }\n    :host tbody td.disabled {\n      background: hsl(var(--sg-hsl-disabled-background));\n      border: solid 1px var(--sg-bg-level-2);\n      border-radius: 4px;\n      color: hsl(var(--sg-hsl-disabled-color));\n      cursor: not-allowed;\n      font-weight: 400;\n    }\n    :host tbody td.disabled.sg-date-holiday {\n      color: hsla(var(--sg-hsl-red-2), 0.25);\n    }\n    :host tbody td.disabled .number,\n    :host tbody td.disabled .indicator-dot {\n      --_color: hsl(var(--sg-hsl-disabled-color)) !important;\n    }\n    :host tbody td.custom-date {\n      position: relative;\n    }\n    :host tbody .number {\n      color: var(--_color, \"currentColor\");\n    }\n    :host tbody .indicator-dot {\n      display: block;\n      width: 0.375rem;\n      height: 0.375rem;\n      top: 1.5rem;\n      border-radius: 50%;\n      margin: auto;\n      position: absolute;\n      inset-block-end: 0.125rem;\n      inset-inline: 0;\n      background-color: var(--_color);\n    }\n    :host table {\n      flex-grow: 1;\n      width: 100%;\n    }\n    :host table td {\n      width: 3rem;\n      height: 3rem;\n    }\n  }\n  @layer _modifiers {\n    .week-number {\n      border-right: solid 1px var(--gds-ref-pallet-base300);\n      font-weight: 400;\n      pointer-events: none;\n    }\n  }\n}";
+const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n/* medium */\n/* regular */\n/* regular */\n/* regular */\n/* hover */\n/* focus */\n/* selected */\n/* highlighted */\n/* active */\n/* disabled */\n/* today */\n/* weekend */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  @layer _base {\n    :host {\n      display: flex;\n      justify-content: center;\n    }\n    @media (max-width: 35.98em) {\n      :host {\n        flex-wrap: wrap;\n        overflow-y: auto;\n      }\n    }\n    :host table {\n      border-spacing: 0;\n    }\n    :host th,\n    :host td {\n      box-sizing: border-box;\n      height: 2.75rem;\n      text-align: center;\n      width: 2.75rem;\n    }\n    :host thead {\n      /* days */\n    }\n    :host thead th {\n      background: var(--sg-bg-level-2);\n      border-bottom: solid 1px var(--sg-grey-300);\n      font-weight: 400;\n      top: 0;\n    }\n    @media (max-width: 35.98em) {\n      :host thead th {\n        position: sticky;\n      }\n    }\n    :host tbody {\n      /* week numbers */\n    }\n    :host tbody th {\n      font-weight: 400;\n    }\n    :host tbody {\n      /* dates */\n    }\n    :host tbody td {\n      border: solid 1px transparent;\n      font-weight: 500;\n      -webkit-user-select: none;\n         -moz-user-select: none;\n              user-select: none;\n      /* weekend */\n    }\n    :host tbody td.sg-date-holiday:not(.disabled) {\n      background: var(--sg-bg-level-2);\n      color: hsl(var(--sg-hsl-red-2));\n    }\n    :host tbody td {\n      /* today */\n    }\n    :host tbody td.today {\n      background: transparent;\n      border-radius: 4px;\n      box-shadow: inset 0 0 0 2px var(--grey-1000);\n      color: var(--grey-1000);\n    }\n    :host tbody td {\n      /* hover */\n    }\n    :host tbody td:hover:not(.disabled) {\n      background: var(--grey-500);\n      border: solid 1px var(--sg-bg-level-2);\n      border-radius: 4px;\n      color: var(--gds-sys-color-font);\n      cursor: pointer;\n    }\n    :host tbody td {\n      /* focus */\n    }\n    :host tbody td:focus-visible:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host tbody td:focus-visible:focus, :host tbody td:focus-visible:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    :host tbody td:focus-visible:not(.disabled) {\n      border: solid 1px var(--sg-bg-level-2);\n      border-radius: 4px;\n      cursor: pointer;\n      position: relative;\n      z-index: 0;\n    }\n    :host tbody td {\n      /* selected */\n    }\n    :host tbody td[aria-selected=true] {\n      background: var(--grey-1000);\n      border: solid 1px var(--sg-bg-level-2);\n      border-radius: 4px;\n      color: hsl(var(--sg-hsl-white));\n    }\n    :host tbody td {\n      /* highlighted */\n    }\n    :host tbody td[tabindex=\"0\"] {\n      border-radius: 4px;\n    }\n    :host tbody td {\n      /* active (pressed) */\n    }\n    :host tbody td:hover:active:not(.disabled) {\n      background: var(--grey-1000);\n      border: solid 1px var(--sg-bg-level-2);\n      border-radius: 4px;\n      color: hsl(var(--sg-hsl-white));\n    }\n    :host tbody td {\n      /* disabled */\n    }\n    :host tbody td.disabled {\n      background: hsl(var(--sg-hsl-disabled-background));\n      border: solid 1px var(--sg-bg-level-2);\n      border-radius: 4px;\n      color: hsl(var(--sg-hsl-disabled-color));\n      cursor: not-allowed;\n      font-weight: 400;\n    }\n    :host tbody td.disabled.sg-date-holiday {\n      color: hsla(var(--sg-hsl-red-2), 0.25);\n    }\n    :host tbody td.disabled .number,\n    :host tbody td.disabled .indicator-dot {\n      --_color: hsl(var(--sg-hsl-disabled-color)) !important;\n    }\n    :host tbody td.custom-date {\n      position: relative;\n    }\n    :host tbody .number {\n      color: var(--_color, \"currentColor\");\n    }\n    :host tbody .indicator-dot {\n      display: block;\n      width: 0.375rem;\n      height: 0.375rem;\n      top: 1.5rem;\n      border-radius: 50%;\n      margin: auto;\n      position: absolute;\n      inset-block-end: 0.125rem;\n      inset-inline: 0;\n      background-color: var(--_color);\n    }\n    :host table {\n      flex-grow: 1;\n      width: 100%;\n    }\n    :host table td {\n      width: 3rem;\n      height: 3rem;\n    }\n  }\n  @layer _modifiers {\n    .week-number {\n      border-right: solid 1px var(--gds-ref-pallet-base300);\n      font-weight: 400;\n      pointer-events: none;\n    }\n  }\n}";
 export default styles;

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/context-menu/context-menu.trans.styles.scss.js

@@ -1,2 +1,2 @@
-const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\ni.sg-icon {\n  font-size: 0;\n  width: 1rem;\n  height: 1rem;\n  display: inline-block;\n}\ni.sg-icon::before {\n  content: \"\";\n  display: inline-block;\n  background: var(--color);\n  width: 100%;\n  height: 100%;\n  -webkit-mask-repeat: no-repeat;\n          mask-repeat: no-repeat;\n}\ni.sg-icon.sg-icon-calendar::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-calendar-range::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-ellipsis::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-grip-vertical::before {\n  -webkit-mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-next::before {\n  background: none;\n  border-bottom: 2px solid;\n  border-left: 2px solid;\n  content: \"\";\n  display: block;\n  height: 12px;\n  margin-left: -10px;\n  margin-top: 2px;\n  transform: translate(75%) rotate(-135deg) scaleZ(-1);\n  transition: transform 0.3s ease-in;\n  width: 12px;\n}\ni.sg-icon.sg-icon-previous::before {\n  background: none;\n  border-bottom: 2px solid;\n  border-left: 2px solid;\n  content: \"\";\n  display: block;\n  height: 12px;\n  margin-left: -4px;\n  margin-top: 2px;\n  transform: translate(75%) rotate(45deg) scaleZ(-1);\n  transition: transform 0.3s ease-in;\n  width: 12px;\n}\ni.sg-icon.sg-icon-ellipsis::before {\n  margin-right: -2px;\n}\n\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  @layer _base, _overrides;\n  :host {\n    display: inline-block;\n  }\n  @layer _base {\n    button {\n      background-color: transparent;\n      border: 0;\n      cursor: pointer;\n      font-family: inherit;\n      padding: 0;\n      padding-left: 1rem;\n      padding-right: 1rem;\n      padding-bottom: 0.75rem;\n      padding-top: 0.75rem;\n      border-radius: var(--sg-border-radius);\n      border: solid var(--sg-border-width) var(--sg-border-color);\n      font-weight: 500;\n      min-height: 2.75rem;\n      align-items: center;\n      display: inline-flex;\n      justify-content: center;\n      background-color: transparent;\n      border: 0.0625rem solid transparent;\n      padding: 0.625rem;\n      height: 2.75rem;\n      width: 2.75rem;\n      min-width: auto;\n      --color: var(--gds-sys-color-base-800);\n    }\n    button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    button:focus, button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    @media (max-width: 35.98em) {\n      button {\n        min-width: 100%;\n      }\n    }\n    @media screen and (-ms-high-contrast: active) {\n      button {\n        border: 2px solid currentcolor;\n      }\n    }\n    button.small {\n      min-height: 2rem;\n      padding: 0.4375rem 0.75rem;\n      font-size: 0.875rem;\n      line-height: 1rem;\n    }\n    button.large {\n      min-height: 4rem;\n      padding: 1rem 1.5rem;\n      font-size: 1.5rem;\n      line-height: 2rem;\n    }\n    .form-group button {\n      margin-top: -0.625rem;\n    }\n    button.small {\n      height: 2rem;\n      width: 2rem;\n      padding: 0.4375rem;\n      line-height: 1.125rem;\n    }\n    button svg {\n      height: 1rem;\n      width: 1rem;\n    }\n    button path,\n    button line,\n    button circle,\n    button rect,\n    button ellipse,\n    button polyline,\n    button text {\n      fill: var(--gds-sys-color-base-800);\n      stroke: var(--gds-sys-color-base-800);\n      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);\n    }\n    button:hover, button.highlighted {\n      background-color: rgba(0, 0, 0, 0.1);\n      border-color: transparent;\n    }\n    button:active, button.highlighted:hover {\n      background-color: rgba(0, 0, 0, 0.2);\n      border-color: transparent;\n    }\n  }\n  @layer _overrides {\n    button {\n      border-color: transparent;\n      color: var(--gds-ref-pallet-base800);\n      display: flex;\n      gap: 0.5rem;\n      line-height: 0.75;\n      padding-inline: 0.4375rem;\n      width: auto;\n    }\n    button.highlighted {\n      background-color: var(--gds-ref-pallet-base300);\n    }\n  }\n}";
+const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\ni.sg-icon {\n  font-size: 0;\n  width: 1rem;\n  height: 1rem;\n  display: inline-block;\n}\ni.sg-icon::before {\n  content: \"\";\n  display: inline-block;\n  background: var(--color);\n  width: 100%;\n  height: 100%;\n  -webkit-mask-repeat: no-repeat;\n          mask-repeat: no-repeat;\n}\ni.sg-icon.sg-icon-calendar::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-calendar-range::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-ellipsis::before {\n  -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-grip-vertical::before {\n  -webkit-mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n          mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-next::before {\n  background: none;\n  border-bottom: 2px solid;\n  border-left: 2px solid;\n  content: \"\";\n  display: block;\n  height: 12px;\n  margin-left: -10px;\n  margin-top: 2px;\n  transform: translate(75%) rotate(-135deg) scaleZ(-1);\n  transition: transform 0.3s ease-in;\n  width: 12px;\n}\ni.sg-icon.sg-icon-previous::before {\n  background: none;\n  border-bottom: 2px solid;\n  border-left: 2px solid;\n  content: \"\";\n  display: block;\n  height: 12px;\n  margin-left: -4px;\n  margin-top: 2px;\n  transform: translate(75%) rotate(45deg) scaleZ(-1);\n  transition: transform 0.3s ease-in;\n  width: 12px;\n}\ni.sg-icon.sg-icon-ellipsis::before {\n  margin-right: -2px;\n}\n\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  @layer _base, _overrides;\n  :host {\n    display: inline-block;\n  }\n  @layer _base {\n    button {\n      background-color: transparent;\n      border: 0;\n      cursor: pointer;\n      font-family: inherit;\n      padding: 0;\n      padding-left: 1rem;\n      padding-right: 1rem;\n      padding-bottom: 0.75rem;\n      padding-top: 0.75rem;\n      border-radius: var(--sg-border-radius);\n      border: solid var(--sg-border-width) var(--sg-border-color);\n      font-weight: 500;\n    }\n    button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    button:focus, button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    button {\n      min-height: 2.75rem;\n      align-items: center;\n      display: inline-flex;\n      justify-content: center;\n    }\n    @media (max-width: 35.98em) {\n      button {\n        min-width: 100%;\n      }\n    }\n    @media screen and (-ms-high-contrast: active) {\n      button {\n        border: 2px solid currentcolor;\n      }\n    }\n    button.small {\n      min-height: 2rem;\n      padding: 0.4375rem 0.75rem;\n      font-size: 0.875rem;\n      line-height: 1rem;\n    }\n    button.large {\n      min-height: 4rem;\n      padding: 1rem 1.5rem;\n      font-size: 1.5rem;\n      line-height: 2rem;\n    }\n    button {\n      background-color: transparent;\n      border: 0.0625rem solid transparent;\n      padding: 0.625rem;\n      height: 2.75rem;\n      width: 2.75rem;\n      min-width: auto;\n      --color: var(--gds-sys-color-base-800);\n    }\n    .form-group button {\n      margin-top: -0.625rem;\n    }\n    button.small {\n      height: 2rem;\n      width: 2rem;\n      padding: 0.4375rem;\n      line-height: 1.125rem;\n    }\n    button svg {\n      height: 1rem;\n      width: 1rem;\n    }\n    button path,\n    button line,\n    button circle,\n    button rect,\n    button ellipse,\n    button polyline,\n    button text {\n      fill: var(--gds-sys-color-base-800);\n      stroke: var(--gds-sys-color-base-800);\n      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);\n    }\n    button:hover, button.highlighted {\n      background-color: rgba(0, 0, 0, 0.1);\n      border-color: transparent;\n    }\n    button:active, button.highlighted:hover {\n      background-color: rgba(0, 0, 0, 0.2);\n      border-color: transparent;\n    }\n  }\n  @layer _overrides {\n    button {\n      border-color: transparent;\n      color: var(--gds-ref-pallet-base800);\n      display: flex;\n      gap: 0.5rem;\n      line-height: 0.75;\n      padding-inline: 0.4375rem;\n      width: auto;\n    }\n    button.highlighted {\n      background-color: var(--gds-ref-pallet-base300);\n    }\n  }\n}";
 export default styles;

package/components/datepicker/datepicker.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.QU3DSPNU.js";
-var _utcHours, _valueOnOpen, _Datepicker_instances, shouldShowFooter_fn, renderBackToValidRangeButton_fn, focusDate_fn, getSpinnerLabel_fn, getMinSpinnerValue_fn, getMaxSpinnerValue_fn, dispatchChangeEvent_fn, dispatchInputEvent_fn, _handleFieldFocusOut, _handleSpinnerFocus, _handleClipboardCopy, _handleClipboardPaste, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleCalendarFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, years_get, isValueOutsideRange_get;
+var _utcHours, _valueOnOpen, _Datepicker_instances, shouldShowFooter_fn, renderBackToValidRangeButton_fn, focusDate_fn, getSpinnerLabel_fn, getMinSpinnerValue_fn, getMaxSpinnerValue_fn, dispatchChangeEvent_fn, dispatchInputEvent_fn, _handleSpinnerFocus, _handleClipboardCopy, _handleClipboardPaste, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleCalendarFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, years_get, isValueOutsideRange_get;
 import { localized, msg } from "@lit/localize";
 import { nothing } from "lit";
 import { property, query, queryAll, queryAsync, state } from "lit/decorators.js";
@@ -62,13 +62,6 @@ let Datepicker = class extends GdsFormControlElement {
     this._focusedYear = (/* @__PURE__ */ new Date()).getFullYear();
     this._dateFormatLayout = __privateMethod(this, _Datepicker_instances, parseDateFormat_fn).call(this, "y-m-d");
     __privateAdd(this, _valueOnOpen);
-    __privateAdd(this, _handleFieldFocusOut, (e) => {
-      this._elTrigger.then((_) => {
-        const parent = e.relatedTarget?.parentElement;
-        if (parent === e.target) return;
-        document.getSelection()?.removeAllRanges();
-      });
-    });
     __privateAdd(this, _handleSpinnerFocus, (e) => {
       this._elTrigger.then((field) => {
         document.getSelection()?.removeAllRanges();
@@ -620,7 +613,6 @@ dispatchInputEvent_fn = function() {
     })
   );
 };
-_handleFieldFocusOut = new WeakMap();
 _handleSpinnerFocus = new WeakMap();
 _handleClipboardCopy = new WeakMap();
 _handleClipboardPaste = new WeakMap();

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/formatted-text/number/formatted-number.component.d.ts

@@ -11,7 +11,8 @@ import { NumberFormats } from '../formatters';
  * <gds-formatted-number
  *   value="1234.5"
  *   locale="sv-SE"
- *   currency="SEK">
+ *   currency="SEK"
+ *   decimals={3}>
  * </gds-formatted-number>
  */
 export declare class GdsFormattedNumber extends GdsFormattedText {
@@ -21,6 +22,8 @@ export declare class GdsFormattedNumber extends GdsFormattedText {
     locale?: string;
     /** The currency used when formatting numbers. */
     currency?: string;
+    /** The number of decimal places to display. */
+    decimals?: number;
     /**
      * Specifies the number format.
      * @default 'decimalsAndThousands'