@sebgroup/green-core 1.69.4 → 1.70.1

package/components/button/button.js

@@ -1,22 +1,6 @@
-import {
-  GdsButton
-} from "../../chunks/chunk.RUAOOPYY.js";
-import "../../chunks/chunk.TX64TTBN.js";
-import "../../chunks/chunk.PVW6UNML.js";
-import "../../chunks/chunk.VA6TUMR2.js";
-import "../../chunks/chunk.WM7HBMMV.js";
-import "../../chunks/chunk.TWXTKG4B.js";
-import "../../chunks/chunk.76QWARGM.js";
-import "../../chunks/chunk.NUUST5OZ.js";
-import "../../chunks/chunk.T4D3GD4D.js";
-import "../../chunks/chunk.TYGMNHNO.js";
-import "../../chunks/chunk.HEZEUVHT.js";
-import "../../chunks/chunk.6QMJ7GQK.js";
-import "../../chunks/chunk.YO24ZYAD.js";
-import "../../chunks/chunk.TMEWQZER.js";
-import "../../chunks/chunk.QK3R23GV.js";
-import "../../chunks/chunk.B7ZOSVCQ.js";
-import "../../chunks/chunk.SEHSDSX2.js";
+import "../../chunks/chunk.QTSIPXV3.js";
+import { GdsButton } from "./button.component";
+GdsButton.define();
 export {
   GdsButton
 };

package/components/button/button.style.css.js

@@ -0,0 +1,4 @@
+
+            const styles = "@layer tokens, core, a11y, ranks, sizes, variants, disabled;\n\n@layer a11y {\n  @media (prefers-reduced-motion: reduce) {\n    .button {\n      transition: none;\n    }\n  }\n}\n\n@layer core {\n  :host {\n    display: inline-flex;\n    max-width: 100%;\n  }\n\n  .button {\n    --_block-size: var(--gds-space-3xl);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    border: none;\n    cursor: pointer;\n    block-size: var(--_block-size);\n    background-color: var(--gds-color-l3-background-primary);\n    color: var(--gds-color-l3-content-primary);\n    border-radius: var(--gds-space-max);\n    font-family: inherit;\n    font-size: var(--gds-text-size-detail-m);\n    line-height: var(--gds-text-line-height-detail-m);\n    font-weight: var(--gds-text-weight-book);\n    gap: var(--gds-space-s);\n    outline-color: transparent;\n    outline-offset: var(--gds-space-3xs);\n    outline-style: solid;\n    outline-width: var(--gds-space-3xs);\n    padding-block: var(--gds-space-s);\n    padding-inline: var(--gds-space-l);\n    position: relative;\n    text-decoration: none;\n    transition-property: color, border-colorm, background;\n    transition-duration: 0.2s;\n    flex: 1;\n\n    &:focus {\n      outline-color: var(--gds-color-l3-content-tertiary);\n\n      &:not(:focus-visible) {\n        outline-color: transparent;\n      }\n    }\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-primary),\n          var(--gds-color-l3-states-dark-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-color-l3-background-primary),\n        var(--gds-color-l3-states-dark-pressed)\n      );\n    }\n\n    &:not(.circle) slot:not([name]) {\n      display: block;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n}\n\n/* High specificity */\n.button.circle {\n  aspect-ratio: 1 / 1;\n  padding: 0;\n  min-block-size: var(--_block-size);\n  min-inline-size: var(--_block-size);\n}\n\n.button:disabled {\n  pointer-events: none;\n  background-color: var(--gds-color-l3-background-disabled);\n  color: var(--gds-color-l3-content-disabled);\n}\n\n@layer ranks {\n  :host([rank*='secondary']) .button {\n    background-color: var(--gds-color-l3-background-secondary);\n    color: var(--gds-color-l3-content-tertiary);\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-secondary),\n          var(--gds-color-l3-states-light-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-color-l3-background-secondary),\n        var(--gds-color-l3-states-light-pressed)\n      );\n    }\n  }\n\n  :host([rank*='tertiary']) .button {\n    background-color: transparent;\n    color: var(--gds-color-l3-content-tertiary);\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          transparent,\n          var(--gds-color-l3-states-light-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        transparent,\n        var(--gds-color-l3-states-light-pressed)\n      );\n    }\n  }\n}\n\n@layer sizes {\n  :host([size='xs']) .button {\n    --_block-size: var(--gds-space-l);\n    font-size: var(--gds-text-size-detail-s);\n    line-height: var(--gds-text-line-height-detail-s);\n    padding-inline: var(--gds-space-m);\n  }\n\n  :host([size='small']) .button {\n    --_block-size: var(--gds-space-xl);\n    font-size: var(--gds-text-size-detail-s);\n    line-height: var(--gds-text-line-height-detail-s);\n    padding-inline: var(--gds-space-m);\n  }\n\n  :host([size='medium']) .button {\n    --_block-size: var(--gds-space-2xl);\n    font-size: var(--gds-text-size-detail-m);\n    line-height: var(--gds-text-line-height-detail-m);\n  }\n}\n\n@layer variants {\n  .positive {\n    background-color: var(--gds-color-l3-background-positive);\n\n    &:focus {\n      outline-color: var(--gds-color-l3-content-positive);\n\n      &:not(:focus-visible) {\n        outline-color: transparent;\n      }\n    }\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-positive),\n          var(--gds-color-l3-states-dark-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-color-l3-background-positive),\n        var(--gds-color-l3-states-dark-pressed)\n      );\n    }\n\n    &.secondary {\n      background-color: var(--gds-color-l3-background-positive-secondary);\n      color: var(--gds-color-l3-content-positive);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            var(--gds-color-l3-background-positive-secondary),\n            var(--gds-color-l3-states-positive-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-positive-secondary),\n          var(--gds-color-l3-states-positive-pressed)\n        );\n      }\n    }\n\n    &.tertiary {\n      background-color: transparent;\n      color: var(--gds-color-l3-content-positive);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            transparent,\n            var(--gds-color-l3-states-positive-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          transparent,\n          var(--gds-color-l3-states-positive-pressed)\n        );\n      }\n    }\n  }\n\n  .negative {\n    background-color: var(--gds-color-l3-background-negative);\n\n    &:focus {\n      outline-color: var(--gds-color-l3-content-negative);\n      &:not(:focus-visible) {\n        outline-color: transparent;\n      }\n    }\n\n    @media (pointer: fine) {\n      &:hover {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-negative),\n          var(--gds-color-l3-states-dark-hover)\n        );\n      }\n    }\n\n    &:active {\n      background-color: color-mix(\n        in srgb,\n        var(--gds-color-l3-background-negative),\n        var(--gds-color-l3-states-dark-pressed)\n      );\n    }\n\n    &.secondary {\n      background-color: var(--gds-color-l3-background-negative-secondary);\n      color: var(--gds-color-l3-content-negative);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            var(--gds-color-l3-background-negative-secondary),\n            var(--gds-color-l3-states-negative-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          var(--gds-color-l3-background-negative-secondary),\n          var(--gds-color-l3-states-negative-pressed)\n        );\n      }\n    }\n\n    &.tertiary {\n      background-color: transparent;\n      color: var(--gds-color-l3-content-negative);\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: color-mix(\n            in srgb,\n            transparent,\n            var(--gds-color-l3-states-negative-hover)\n          );\n        }\n      }\n\n      &:active {\n        background-color: color-mix(\n          in srgb,\n          transparent,\n          var(--gds-color-l3-states-negative-pressed)\n        );\n      }\n    }\n  }\n}\n";
+            export default styles;
+          

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

@@ -1,12 +1,10 @@
-import {
-  button_trans_styles_default,
-  register
-} from "../../chunks/chunk.T4D3GD4D.js";
-import "../../chunks/chunk.HEZEUVHT.js";
-import "../../chunks/chunk.6QMJ7GQK.js";
-import "../../chunks/chunk.QK3R23GV.js";
-import "../../chunks/chunk.B7ZOSVCQ.js";
-import "../../chunks/chunk.SEHSDSX2.js";
+import "../../chunks/chunk.QTSIPXV3.js";
+import { TransitionalStyles } from "../../transitional-styles";
+import styles from "./button.trans.styles.scss.js";
+function register() {
+  TransitionalStyles.instance.register("gds-button", styles.toString());
+}
+var button_trans_styles_default = register;
 export {
   button_trans_styles_default as default,
   register

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

@@ -0,0 +1,4 @@
+
+            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      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: all 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: all 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: all 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: all 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: all 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: all 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}";
+            export default styles;
+          

package/components/button/index.js

@@ -1,23 +1 @@
-import "../../chunks/chunk.JGTSJ4J6.js";
-import {
-  GdsButton
-} from "../../chunks/chunk.RUAOOPYY.js";
-import "../../chunks/chunk.TX64TTBN.js";
-import "../../chunks/chunk.PVW6UNML.js";
-import "../../chunks/chunk.VA6TUMR2.js";
-import "../../chunks/chunk.WM7HBMMV.js";
-import "../../chunks/chunk.TWXTKG4B.js";
-import "../../chunks/chunk.76QWARGM.js";
-import "../../chunks/chunk.NUUST5OZ.js";
-import "../../chunks/chunk.T4D3GD4D.js";
-import "../../chunks/chunk.TYGMNHNO.js";
-import "../../chunks/chunk.HEZEUVHT.js";
-import "../../chunks/chunk.6QMJ7GQK.js";
-import "../../chunks/chunk.YO24ZYAD.js";
-import "../../chunks/chunk.TMEWQZER.js";
-import "../../chunks/chunk.QK3R23GV.js";
-import "../../chunks/chunk.B7ZOSVCQ.js";
-import "../../chunks/chunk.SEHSDSX2.js";
-export {
-  GdsButton
-};
+export * from "./button";

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

@@ -0,0 +1,105 @@
+import { GdsElement } from '../../gds-element';
+/**
+ * Used to customize the appearance of a date in the calendar.
+ */
+export type CustomizedDate = {
+    /**
+     * The date to customize.
+     */
+    date: Date;
+    /**
+     * The color of the indicator.
+     */
+    color?: string;
+    /**
+     * The type of indicator.
+     */
+    indicator?: 'dot';
+    /**
+     * Whether the date is disabled or not.
+     */
+    disabled: boolean;
+};
+/**
+ * @element gds-calendar
+ * @status stable
+ *
+ * A calendar is a widget that allows the user to select a date.
+ *
+ * @event change - Fired when a date is selected.
+ * @event gds-date-focused - Fired when focus is changed. Can be cancelled using `event.preventDefault()`.
+ */
+export declare class GdsCalendar extends GdsElement {
+    #private;
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    static shadowRootOptions: ShadowRootInit;
+    /**
+     * The currently selected date.
+     */
+    value?: Date;
+    /**
+     * The minimum date that can be selected.
+     */
+    min: Date;
+    /**
+     * The maximum date that can be selected.
+     */
+    max: Date;
+    /**
+     * The date that is currently focused.
+     */
+    focusedDate: Date;
+    /**
+     * Whether to disable weekends or not.
+     */
+    disabledWeekends: boolean;
+    /**
+     * An array of dates that should be disabled in the calendar.
+     */
+    disabledDates?: Date[];
+    /**
+     * The month that is currently focused.
+     */
+    get focusedMonth(): number;
+    set focusedMonth(month: number);
+    /**
+     * The year that is currently focused.
+     */
+    get focusedYear(): number;
+    set focusedYear(year: number);
+    /**
+     * Whether to show week numbers or not.
+     */
+    showWeekNumbers: boolean;
+    /**
+     * Whether to hide extraneous days (that fall ouside of current month)
+     */
+    hideExtraneousDays: boolean;
+    /**
+     * Whether to hide the day names shown above the calendar.
+     */
+    hideDayNames: boolean;
+    /**
+     * An array of `CustomizedDate` objects that can be used customize the appearance of dates.
+     * This can only be set through the property, not through an attribute.
+     */
+    customizedDates?: CustomizedDate[];
+    /**
+     * The accessible label for the calendar.
+     */
+    label?: string;
+    /**
+     * A template function to customize the accessible date label.
+     */
+    dateLabelTemplate: (date: Date) => string;
+    /**
+     * Returns the date cell element for the given day number.
+     */
+    getDateCell(dayNumber: number): Element | null | undefined;
+    private _currentLocale;
+    private _elFocusedCell?;
+    connectedCallback(): void;
+    focus(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    private _valueChanged;
+}

package/components/calendar/calendar.component.js

@@ -0,0 +1,317 @@
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateMethod
+} from "../../chunks/chunk.QTSIPXV3.js";
+var _setSelectedDate, setSelectedDate_fn, _handleKeyDown, handleKeyDown_fn;
+import { localized, msg } from "@lit/localize";
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { when } from "lit/directives/when.js";
+import {
+  addDays,
+  addMonths,
+  getWeek,
+  isSameDay,
+  isSameMonth,
+  lastDayOfMonth,
+  setHours,
+  subMonths
+} from "date-fns";
+import { GdsElement } from "../../gds-element";
+import { gdsCustomElement } from "../../scoping";
+import { tokens } from "../../tokens.style";
+import { TransitionalStyles } from "../../transitional-styles";
+import { watch } from "../../utils/decorators/watch";
+import style from "./calendar.styles";
+import { renderMonthGridView } from "./functions";
+let GdsCalendar = class extends GdsElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _setSelectedDate);
+    __privateAdd(this, _handleKeyDown);
+    this.min = new Date((/* @__PURE__ */ new Date()).getFullYear() - 10, 0, 1);
+    this.max = new Date((/* @__PURE__ */ new Date()).getFullYear() + 10, 0, 1);
+    this.focusedDate = /* @__PURE__ */ new Date();
+    this.disabledWeekends = false;
+    this.showWeekNumbers = false;
+    this.hideExtraneousDays = false;
+    this.hideDayNames = false;
+    this.dateLabelTemplate = (date) => date.toLocaleDateString(this._currentLocale, {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    });
+    this._currentLocale = navigator.language;
+  }
+  get focusedMonth() {
+    return this.focusedDate.getMonth();
+  }
+  set focusedMonth(month) {
+    const lastOfSelectedMonth = lastDayOfMonth(
+      new Date(this.focusedYear, month, 1)
+    );
+    const newFocusedDate = new Date(this.focusedDate);
+    newFocusedDate.setDate(
+      Math.min(this.focusedDate.getDate(), lastOfSelectedMonth.getDate())
+    );
+    newFocusedDate.setMonth(month);
+    newFocusedDate.setHours(12, 0, 0, 0);
+    this.focusedDate = newFocusedDate;
+  }
+  get focusedYear() {
+    return this.focusedDate.getFullYear();
+  }
+  set focusedYear(year) {
+    this.focusedDate = new Date(this.focusedDate.setFullYear(year));
+  }
+  /**
+   * Returns the date cell element for the given day number.
+   */
+  getDateCell(dayNumber) {
+    return this.shadowRoot?.querySelector(`#dateCell-${dayNumber}`);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    TransitionalStyles.instance.apply(this, "gds-calendar");
+    this.addEventListener("keydown", __privateMethod(this, _handleKeyDown, handleKeyDown_fn));
+    window.addEventListener("lit-localize-status", (e) => {
+      if (e.detail.status === "ready")
+        this._currentLocale = e.detail.readyLocale;
+    });
+  }
+  focus() {
+    super.focus();
+    this._elFocusedCell?.focus();
+  }
+  render() {
+    const currentDate = /* @__PURE__ */ new Date();
+    return html`<table role="grid" aria-label="${ifDefined(this.label)}">
+      ${when(
+      !this.hideDayNames,
+      () => html`<thead role="rowgroup">
+            <tr role="row">
+              ${when(this.showWeekNumbers, () => html`<th></th>`)}
+              <th>${msg("Mon")}</th>
+              <th>${msg("Tue")}</th>
+              <th>${msg("Wed")}</th>
+              <th>${msg("Thu")}</th>
+              <th>${msg("Fri")}</th>
+              <th>${msg("Sat")}</th>
+              <th>${msg("Sun")}</th>
+            </tr>
+          </thead>`
+    )}
+      <tbody role="rowgroup">
+        ${renderMonthGridView(
+      this.focusedDate,
+      (weeks) => html`
+            ${weeks.map(
+        (week) => html`
+                <tr role="row">
+                  ${when(
+          this.showWeekNumbers,
+          () => html`<td class="week-number" scope="row">
+                        ${getWeek(week.days[0])}
+                      </td>`
+        )}
+                  ${week.days.map((day) => {
+          const customization = this.customizedDates && this.customizedDates.find((d) => isSameDay(d.date, day));
+          const displayOptions = {
+            // Defaults
+            color: "currentColor",
+            // Get baseline disabled state from the disabledDates prop (or false if unset)
+            disabled: Boolean(
+              this.disabledDates && this.disabledDates.some((d) => isSameDay(d, day))
+            ),
+            // Override with any customizations
+            ...customization
+          };
+          const isOutsideCurrentMonth = !isSameMonth(
+            this.focusedDate,
+            day
+          );
+          const isOutsideMinMax = (day < this.min || day > this.max) && !isSameDay(day, this.min) && !isSameDay(day, this.max);
+          const isWeekend = day.getDay() === 0 || day.getDay() === 6;
+          const isDisabled = displayOptions.disabled || isOutsideCurrentMonth || isOutsideMinMax || this.disabledWeekends && isWeekend;
+          const shouldRenderBlank = this.hideExtraneousDays && isOutsideCurrentMonth;
+          return shouldRenderBlank ? html`<td inert></td>` : html`
+                          <td
+                            role="${ifDefined(
+            isDisabled ? void 0 : "gridcell"
+          )}"
+                            class="${classMap({
+            "custom-date": Boolean(customization),
+            disabled: Boolean(isDisabled),
+            today: isSameDay(currentDate, day)
+          })}"
+                            ?disabled=${isDisabled}
+                            tabindex="${isSameDay(this.focusedDate, day) ? 0 : -1}"
+                            aria-selected="${this.value && isSameDay(this.value, day) ? "true" : "false"}"
+                            aria-label="${this.dateLabelTemplate(day)}"
+                            @click=${() => isDisabled ? null : __privateMethod(this, _setSelectedDate, setSelectedDate_fn).call(this, day)}
+                            id="dateCell-${day.getDate()}"
+                          >
+                            <span
+                              class="number"
+                              style="--_color: ${displayOptions ? displayOptions?.color : ""}"
+                              >${day.getDate()}</span
+                            >
+
+                            ${when(
+            displayOptions.indicator,
+            () => html`<span
+                                  class="indicator-${displayOptions?.indicator}"
+                                  style="--_color: ${displayOptions?.color}"
+                                ></span>`
+          )}
+                          </td>
+                        `;
+        })}
+                </tr>
+              `
+      )}
+          `
+    )}
+      </tbody>
+    </table>`;
+  }
+  _valueChanged() {
+    if (!this.value)
+      return;
+    this.focusedDate = this.value;
+  }
+};
+_setSelectedDate = new WeakSet();
+setSelectedDate_fn = function(date) {
+  const dateOnMidDay = setHours(date, 12);
+  this.value = dateOnMidDay;
+  this.dispatchEvent(
+    new CustomEvent("change", {
+      detail: dateOnMidDay,
+      bubbles: false,
+      composed: false
+    })
+  );
+};
+_handleKeyDown = new WeakSet();
+handleKeyDown_fn = function(e) {
+  let handled = false;
+  let newFocusedDate = new Date(this.focusedDate);
+  if (e.key === "ArrowLeft") {
+    newFocusedDate = addDays(this.focusedDate, -1);
+    handled = true;
+  } else if (e.key === "ArrowRight") {
+    newFocusedDate = addDays(this.focusedDate, 1);
+    handled = true;
+  } else if (e.key === "ArrowUp") {
+    newFocusedDate = addDays(this.focusedDate, -7);
+    handled = true;
+  } else if (e.key === "ArrowDown") {
+    newFocusedDate = addDays(this.focusedDate, 7);
+    handled = true;
+  } else if (e.key === "Enter" || e.key === " ") {
+    if (!this._elFocusedCell?.hasAttribute("disabled")) {
+      __privateMethod(this, _setSelectedDate, setSelectedDate_fn).call(this, this.focusedDate);
+    }
+    handled = true;
+  } else if (e.key === "Home") {
+    newFocusedDate = new Date(this.focusedYear, this.focusedMonth, 1);
+    handled = true;
+  } else if (e.key === "End") {
+    newFocusedDate = new Date(this.focusedYear, this.focusedMonth + 1, 0);
+    handled = true;
+  } else if (e.key === "PageUp") {
+    newFocusedDate = subMonths(this.focusedDate, 1);
+    handled = true;
+  } else if (e.key === "PageDown") {
+    newFocusedDate = addMonths(this.focusedDate, 1);
+    handled = true;
+  }
+  if (newFocusedDate.getFullYear() >= this.min.getFullYear() && newFocusedDate.getFullYear() <= this.max.getFullYear()) {
+    const proceed = this.dispatchEvent(
+      new CustomEvent("gds-date-focused", {
+        detail: newFocusedDate,
+        bubbles: false,
+        composed: false,
+        cancelable: true
+      })
+    );
+    if (proceed) {
+      this.focusedDate = newFocusedDate;
+    }
+  }
+  if (handled) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.updateComplete.then(() => {
+      this._elFocusedCell?.focus();
+    });
+  }
+};
+GdsCalendar.styles = [tokens, style];
+GdsCalendar.shadowRootOptions = {
+  mode: "open",
+  delegatesFocus: true
+};
+__decorateClass([
+  property()
+], GdsCalendar.prototype, "value", 2);
+__decorateClass([
+  property({ type: Date })
+], GdsCalendar.prototype, "min", 2);
+__decorateClass([
+  property({ type: Date })
+], GdsCalendar.prototype, "max", 2);
+__decorateClass([
+  property()
+], GdsCalendar.prototype, "focusedDate", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "disabled-weekends" })
+], GdsCalendar.prototype, "disabledWeekends", 2);
+__decorateClass([
+  property({ type: Array, attribute: "disabled-dates" })
+], GdsCalendar.prototype, "disabledDates", 2);
+__decorateClass([
+  property({ type: Number })
+], GdsCalendar.prototype, "focusedMonth", 1);
+__decorateClass([
+  property({ type: Number })
+], GdsCalendar.prototype, "focusedYear", 1);
+__decorateClass([
+  property({ type: Boolean })
+], GdsCalendar.prototype, "showWeekNumbers", 2);
+__decorateClass([
+  property({ type: Boolean })
+], GdsCalendar.prototype, "hideExtraneousDays", 2);
+__decorateClass([
+  property({ type: Boolean })
+], GdsCalendar.prototype, "hideDayNames", 2);
+__decorateClass([
+  property({ attribute: false })
+], GdsCalendar.prototype, "customizedDates", 2);
+__decorateClass([
+  property()
+], GdsCalendar.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: false })
+], GdsCalendar.prototype, "dateLabelTemplate", 2);
+__decorateClass([
+  state()
+], GdsCalendar.prototype, "_currentLocale", 2);
+__decorateClass([
+  query('td[tabindex="0"]')
+], GdsCalendar.prototype, "_elFocusedCell", 2);
+__decorateClass([
+  watch("value")
+], GdsCalendar.prototype, "_valueChanged", 1);
+GdsCalendar = __decorateClass([
+  gdsCustomElement("gds-calendar"),
+  localized()
+], GdsCalendar);
+export {
+  GdsCalendar
+};