@sebgroup/green-core 2.16.1 → 2.17.0

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/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/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'

package/components/formatted-text/number/formatted-number.component.js

@@ -11,7 +11,12 @@ let GdsFormattedNumber = class extends GdsFormattedText {
     this.format = "decimalsAndThousands";
   }
   get formattedValue() {
-    return numberFormats[this.format](this.value, this.locale, this.currency);
+    return numberFormats[this.format](
+      this.value,
+      this.locale,
+      this.currency,
+      this.decimals
+    );
   }
   firstUpdated(_changedProperties) {
     super.firstUpdated(_changedProperties);
@@ -29,6 +34,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], GdsFormattedNumber.prototype, "currency", 2);
+__decorateClass([
+  property({ type: Number })
+], GdsFormattedNumber.prototype, "decimals", 2);
 __decorateClass([
   property({ type: String })
 ], GdsFormattedNumber.prototype, "format", 2);

package/components/formatted-text/number/number-formatter.d.ts

@@ -1,4 +1,4 @@
 export type NumberFormats = keyof typeof numberFormats;
 export declare const numberFormats: {
-    decimalsAndThousands: (value: string | number | undefined, locale: string | undefined, currency: string | undefined) => string;
+    decimalsAndThousands: (value: string | number | undefined, locale: string | undefined, currency: string | undefined, decimals: number | undefined) => string;
 };

package/components/formatted-text/number/number-formatter.js

@@ -1,9 +1,9 @@
 import "../../../chunks/chunk.QU3DSPNU.js";
 const numberFormats = {
-  decimalsAndThousands: (value, locale, currency) => {
+  decimalsAndThousands: (value, locale, currency, decimals) => {
     const options = {
-      maximumFractionDigits: 2,
-      minimumFractionDigits: 2
+      maximumFractionDigits: decimals ?? 2,
+      minimumFractionDigits: decimals ?? 2
     };
     if (currency) {
       return new Intl.NumberFormat(locale, {

package/components/input/input.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.QU3DSPNU.js";
-var _charCounterComputed, _Input_instances, shouldShowFooter_fn, _handleOnInput, _handleOnChange, _handleFieldClick, _handleClearBtnClick, renderFieldContents_fn, renderSlotLead_fn, renderSlotTrail_fn, renderNativeInput_fn, renderClearButton_fn, shouldShowRemainingChars_get;
+var _charCounterComputed, _Input_instances, shouldShowFooter_fn, _handleOnInput, _handleOnChange, _handleFieldClick, _handleClearBtnClick, renderFieldContents_fn, renderSlotLead_fn, renderSlotTrail_fn, renderNativeInput_fn, renderClearButton_fn;
 import { localized, msg } from "@lit/localize";
 import { property, query, queryAsync } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -203,9 +203,6 @@ renderClearButton_fn = function() {
       </gds-button>`;
   else return nothing;
 };
-shouldShowRemainingChars_get = function() {
-  return __privateGet(this, _charCounterComputed)[1] !== false;
-};
 Input.styles = [tokens, formControlHostStyles, InputStyles];
 __decorateClass([
   property({ attribute: "supporting-text" })

package/components/sensitive/number/sensitive-number.component.d.ts

@@ -16,7 +16,8 @@ import { GdsFormattedNumber } from '../../formatted-text/number/formatted-number
  * <gds-sensitive-number
  *   hide
  *   value="1234"
- *   locale="sv-SE">
+ *   locale="sv-SE"
+ *   decimals={3}>
  * </gds-sensitive-number>
  */
 export declare class GdsSensitiveNumber extends GdsFormattedNumber {

package/components/sensitive/number/sensitive-number.component.js

@@ -14,7 +14,12 @@ let GdsSensitiveNumber = class extends GdsFormattedNumber {
   }
   get formattedValue() {
     if (this.hide) {
-      return numberFormats[this.format](0, this.locale, this.currency);
+      return numberFormats[this.format](
+        0,
+        this.locale,
+        this.currency,
+        this.decimals
+      );
     }
     return super.formattedValue;
   }

package/components/textarea/textarea.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.QU3DSPNU.js";
-var _charCounterComputed, _Textarea_instances, shouldShowFooter_fn, _handleOnInput, _handleOnChange, _handleOnPaste, _handleFieldClick, _handleClearBtnClick, renderFieldContents_fn, renderSlotLead_fn, renderSlotTrail_fn, renderNativeTextarea_fn, renderClearButton_fn, shouldShowRemainingChars_get;
+var _charCounterComputed, _Textarea_instances, shouldShowFooter_fn, _handleOnInput, _handleOnChange, _handleOnPaste, _handleFieldClick, _handleClearBtnClick, renderFieldContents_fn, renderSlotLead_fn, renderSlotTrail_fn, renderNativeTextarea_fn, renderClearButton_fn;
 import { localized, msg } from "@lit/localize";
 import { property, query, queryAsync } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -302,9 +302,6 @@ renderClearButton_fn = function() {
       `;
   else return nothing;
 };
-shouldShowRemainingChars_get = function() {
-  return __privateGet(this, _charCounterComputed)[1] !== false;
-};
 Textarea.styles = [tokens, formControlHostStyle, TextareaStyles];
 __decorateClass([
   styleExpressionProperty({

package/gds-element.js

@@ -14,7 +14,7 @@ class GdsElement extends LitElement {
     /**
      * The semantic version of this element. Can be used for troubleshooting to verify the version being used.
      */
-    this.semanticVersion = "2.16.1";
+    this.semanticVersion = "2.17.0";
     this._isUsingTransitionalStyles = false;
     this._dynamicStylesController = new DynamicStylesController(this);
   }

package/generated/react/alert/index.d.ts

@@ -2,15 +2,15 @@ import { getReactComponent } from "../../../utils/react";
 import { GdsAlert as GdsAlertClass } from "../../../components/alert/alert.component";
 export declare const GdsAlert: (props: React.ComponentProps<ReturnType<typeof getReactComponent<GdsAlertClass>>>) => import("react").ReactElement<Omit<{
     variant?: "positive" | "negative" | "notice" | "warning" | "information" | undefined;
-    label?: string | undefined;
+    label?: string;
     role?: "alert" | "status" | undefined;
-    dismissible?: boolean | undefined;
-    timeout?: number | undefined;
-    buttonLabel?: string | undefined;
+    dismissible?: boolean;
+    timeout?: number;
+    buttonLabel?: string;
     render?: (() => any) | undefined;
-    readonly semanticVersion?: "__GDS_SEM_VER__" | undefined;
+    readonly semanticVersion?: "__GDS_SEM_VER__";
     gdsElementName?: string | undefined;
-    _isUsingTransitionalStyles?: boolean | undefined;
+    _isUsingTransitionalStyles?: boolean;
     _dynamicStylesController?: import("../../../utils/controllers/dynamic-styles-controller").DynamicStylesController | undefined;
     connectedCallback?: (() => void) | undefined;
     disconnectedCallback?: (() => void) | undefined;
@@ -24,7 +24,7 @@ export declare const GdsAlert: (props: React.ComponentProps<ReturnType<typeof ge
     removeController?: ((controller: import("lit").ReactiveController) => void) | undefined;
     attributeChangedCallback?: ((name: string, _old: string | null, value: string | null) => void) | undefined;
     requestUpdate?: ((name?: PropertyKey, oldValue?: unknown, options?: import("lit").PropertyDeclaration) => void) | undefined;
-    readonly updateComplete?: Promise<boolean> | undefined;
+    readonly updateComplete?: Promise<boolean>;
     accessKey?: string | undefined;
     readonly accessKeyLabel?: string | undefined;
     autocapitalize?: string | undefined;
@@ -44,6 +44,7 @@ export declare const GdsAlert: (props: React.ComponentProps<ReturnType<typeof ge
     spellcheck?: boolean | undefined;
     title?: string | undefined;
     translate?: boolean | undefined;
+    writingSuggestions?: string | undefined;
     attachInternals?: (() => ElementInternals) | undefined;
     click?: (() => void) | undefined;
     hidePopover?: (() => void) | undefined;
@@ -64,7 +65,9 @@ export declare const GdsAlert: (props: React.ComponentProps<ReturnType<typeof ge
     readonly clientLeft?: number | undefined;
     readonly clientTop?: number | undefined;
     readonly clientWidth?: number | undefined;
+    readonly currentCSSZoom?: number | undefined;
     id?: string | undefined;
+    innerHTML?: string | undefined;
     readonly localName?: string | undefined;
     readonly namespaceURI?: string | null | undefined;
     onfullscreenchange?: ((this: Element, ev: Event) => any) | null | undefined;
@@ -110,12 +113,13 @@ export declare const GdsAlert: (props: React.ComponentProps<ReturnType<typeof ge
         (namespaceURI: "http://www.w3.org/1998/Math/MathML", localName: string): HTMLCollectionOf<MathMLElement>;
         (namespace: string | null, localName: string): HTMLCollectionOf<Element>;
     } | undefined;
+    getHTML?: ((options?: GetHTMLOptions) => string) | undefined;
     hasAttribute?: ((qualifiedName: string) => boolean) | undefined;
     hasAttributeNS?: ((namespace: string | null, localName: string) => boolean) | undefined;
     hasAttributes?: (() => boolean) | undefined;
     hasPointerCapture?: ((pointerId: number) => boolean) | undefined;
     insertAdjacentElement?: ((where: InsertPosition, element: Element) => Element | null) | undefined;
-    insertAdjacentHTML?: ((position: InsertPosition, text: string) => void) | undefined;
+    insertAdjacentHTML?: ((position: InsertPosition, string: string) => void) | undefined;
     insertAdjacentText?: ((where: InsertPosition, data: string) => void) | undefined;
     matches?: ((selectors: string) => boolean) | undefined;
     releasePointerCapture?: ((pointerId: number) => void) | undefined;
@@ -123,7 +127,7 @@ export declare const GdsAlert: (props: React.ComponentProps<ReturnType<typeof ge
     removeAttributeNS?: ((namespace: string | null, localName: string) => void) | undefined;
     removeAttributeNode?: ((attr: Attr) => Attr) | undefined;
     requestFullscreen?: ((options?: FullscreenOptions) => Promise<void>) | undefined;
-    requestPointerLock?: (() => void) | undefined;
+    requestPointerLock?: ((options?: PointerLockOptions) => Promise<void>) | undefined;
     scroll?: {
         (options?: ScrollToOptions): void;
         (x: number, y: number): void;
@@ -200,6 +204,7 @@ export declare const GdsAlert: (props: React.ComponentProps<ReturnType<typeof ge
     ariaChecked?: string | null | undefined;
     ariaColCount?: string | null | undefined;
     ariaColIndex?: string | null | undefined;
+    ariaColIndexText?: string | null | undefined;
     ariaColSpan?: string | null | undefined;
     ariaCurrent?: string | null | undefined;
     ariaDescription?: string | null | undefined;
@@ -224,6 +229,7 @@ export declare const GdsAlert: (props: React.ComponentProps<ReturnType<typeof ge
     ariaRoleDescription?: string | null | undefined;
     ariaRowCount?: string | null | undefined;
     ariaRowIndex?: string | null | undefined;
+    ariaRowIndexText?: string | null | undefined;
     ariaRowSpan?: string | null | undefined;
     ariaSelected?: string | null | undefined;
     ariaSetSize?: string | null | undefined;
@@ -238,7 +244,6 @@ export declare const GdsAlert: (props: React.ComponentProps<ReturnType<typeof ge
     before?: ((...nodes: (Node | string)[]) => void) | undefined;
     remove?: (() => void) | undefined;
     replaceWith?: ((...nodes: (Node | string)[]) => void) | undefined;
-    innerHTML?: string | undefined;
     readonly nextElementSibling?: Element | null | undefined;
     readonly previousElementSibling?: Element | null | undefined;
     readonly childElementCount?: number | undefined;
@@ -284,7 +289,9 @@ export declare const GdsAlert: (props: React.ComponentProps<ReturnType<typeof ge
     onchange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
     onclick?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
     onclose?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+    oncontextlost?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
     oncontextmenu?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+    oncontextrestored?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
     oncopy?: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null | undefined;
     oncuechange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
     oncut?: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null | undefined;
@@ -350,10 +357,10 @@ export declare const GdsAlert: (props: React.ComponentProps<ReturnType<typeof ge
     onsuspend?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
     ontimeupdate?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
     ontoggle?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
-    ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
-    ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
-    ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
-    ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined | undefined;
+    ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined | undefined;
+    ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined | undefined;
+    ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined | undefined;
     ontransitioncancel?: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null | undefined;
     ontransitionend?: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null | undefined;
     ontransitionrun?: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null | undefined;
@@ -372,5 +379,5 @@ export declare const GdsAlert: (props: React.ComponentProps<ReturnType<typeof ge
     blur?: (() => void) | undefined;
     focus?: ((options?: FocusOptions) => void) | undefined;
 }, "children"> & {
-    children?: import("react").ReactNode;
+    children?: React.ReactNode;
 } & Omit<import("react").HTMLAttributes<HTMLElement>, "children"> & import("react").RefAttributes<HTMLElement>, string | import("react").JSXElementConstructor<any>>;