@sebgroup/green-core 2.11.0 → 2.12.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: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n      background: rgb(0, 122, 199);\n      border-color: rgb(0, 122, 199);\n      color: #fff;\n      --color: #fff;\n    }\n    :host(:not([variant=ghost])) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      color: rgb(255, 255, 255);\n      --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n    }\n    :host(:not([variant=ghost])) .button[aria-selected=true], :host(:not([variant=ghost])) .button:active, :host(:not([variant=ghost])) .button.active, :host(:not([variant=ghost])) .button.active:hover, :host(:not([variant=ghost])) .button:active:hover {\n      background-color: rgb(0, 122, 199);\n      color: rgb(255, 255, 255);\n      --background: rgb(0, 122, 199);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(0, 122, 199);\n    }\n    :host(:not([variant=ghost])) .button:focus-visible {\n      background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      color: rgb(255, 255, 255);\n      --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(25.4035777564, 154.8940067842, 227.221994169) !important;\n    }\n    :host(:not([variant=ghost])) .button:disabled, :host(:not([variant=ghost])) .button.disabled, :host(:not([variant=ghost])) .button[aria-disabled=true] {\n      background: var(--form-control-primary-bg-disabled) !important;\n      color: var(--text-primary-disabled-color) !important;\n      border-color: var(--border-primary-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    :host(:not([variant=ghost])) .button:disabled::-moz-placeholder, :host(:not([variant=ghost])) .button.disabled::-moz-placeholder, :host(:not([variant=ghost])) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host(:not([variant=ghost])) .button:disabled::placeholder, :host(:not([variant=ghost])) .button.disabled::placeholder, :host(:not([variant=ghost])) .button[aria-disabled=true]::placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([rank*=secondary]) .button {\n      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n      background: transparent;\n      border-color: rgb(0, 122, 199);\n      color: rgb(0, 122, 199);\n      --color: rgb(0, 122, 199);\n    }\n    :host([rank*=secondary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([rank*=secondary]) .button:focus, :host([rank*=secondary]) .button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    :host([rank*=secondary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      color: rgb(255, 255, 255);\n      --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n    }\n    :host([rank*=secondary]) .button[aria-selected=true], :host([rank*=secondary]) .button:active, :host([rank*=secondary]) .button.active, :host([rank*=secondary]) .button.active:hover, :host([rank*=secondary]) .button:active:hover {\n      background-color: rgb(0, 122, 199);\n      color: rgb(255, 255, 255);\n      --background: rgb(0, 122, 199);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(0, 122, 199);\n    }\n    :host([rank*=secondary]) .button:disabled, :host([rank*=secondary]) .button.disabled, :host([rank*=secondary]) .button[aria-disabled=true] {\n      background: var(--sg-form-control-bg-disabled) !important;\n      color: var(--text-disabled-color) !important;\n      border-color: var(--border-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    :host([rank*=secondary]) .button:disabled::-moz-placeholder, :host([rank*=secondary]) .button.disabled::-moz-placeholder, :host([rank*=secondary]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([rank*=secondary]) .button:disabled::placeholder, :host([rank*=secondary]) .button.disabled::placeholder, :host([rank*=secondary]) .button[aria-disabled=true]::placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([rank*=tertiary]) .button {\n      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n      background: transparent;\n      border-color: transparent;\n      color: rgb(0, 122, 199);\n      --color: rgb(0, 122, 199);\n    }\n    :host([rank*=tertiary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([rank*=tertiary]) .button:focus, :host([rank*=tertiary]) .button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    :host([rank*=tertiary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      color: rgb(255, 255, 255);\n      --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n    }\n    :host([rank*=tertiary]) .button[aria-selected=true], :host([rank*=tertiary]) .button:active, :host([rank*=tertiary]) .button.active, :host([rank*=tertiary]) .button.active:hover, :host([rank*=tertiary]) .button:active:hover {\n      background-color: rgb(0, 122, 199);\n      color: rgb(255, 255, 255);\n      --background: rgb(0, 122, 199);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(0, 122, 199);\n    }\n    :host([rank*=tertiary]) .button:disabled, :host([rank*=tertiary]) .button.disabled, :host([rank*=tertiary]) .button[aria-disabled=true] {\n      background: var(--sg-form-control-bg-disabled) !important;\n      color: var(--text-disabled-color) !important;\n      border-color: var(--border-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    :host([rank*=tertiary]) .button:disabled::-moz-placeholder, :host([rank*=tertiary]) .button.disabled::-moz-placeholder, :host([rank*=tertiary]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([rank*=tertiary]) .button:disabled::placeholder, :host([rank*=tertiary]) .button.disabled::placeholder, :host([rank*=tertiary]) .button[aria-disabled=true]::placeholder {\n      color: var(--text-disabled-color);\n    }\n    /* stylelint-disable */\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button,\n    :host([variant=negative][rank=primary]) .button {\n      background: rgb(187, 0, 12);\n      border-color: rgb(187, 0, 12);\n      color: #fff;\n      --color: #fff;\n      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:not(:disabled, .disabled, [aria-disabled]):hover,\n    :host([variant=negative][rank=primary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(216, 26, 26);\n      color: rgb(255, 255, 255);\n      --background: rgb(216, 26, 26);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(216, 26, 26);\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-selected=true], :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active:hover,\n    :host([variant=negative][rank=primary]) .button[aria-selected=true],\n    :host([variant=negative][rank=primary]) .button:active,\n    :host([variant=negative][rank=primary]) .button.active,\n    :host([variant=negative][rank=primary]) .button.active:hover,\n    :host([variant=negative][rank=primary]) .button:active:hover {\n      background-color: rgb(187, 0, 12);\n      color: rgb(255, 255, 255);\n      --background: rgb(187, 0, 12);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(187, 0, 12);\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-selected]:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active:hover,\n    :host([variant=negative][rank=primary]) .button[aria-selected]:hover,\n    :host([variant=negative][rank=primary]) .button.active:hover,\n    :host([variant=negative][rank=primary]) .button:active:hover {\n      opacity: 0.9;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus:not(:focus-visible),\n    :host([variant=negative][rank=primary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus-visible,\n    :host([variant=negative][rank=primary]) .button:focus,\n    :host([variant=negative][rank=primary]) .button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true],\n    :host([variant=negative][rank=primary]) .button:disabled,\n    :host([variant=negative][rank=primary]) .button.disabled,\n    :host([variant=negative][rank=primary]) .button[aria-disabled=true] {\n      background: var(--form-control-primary-bg-disabled) !important;\n      color: var(--text-primary-disabled-color) !important;\n      border-color: var(--border-primary-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled::-moz-placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled::-moz-placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true]::-moz-placeholder, :host([variant=negative][rank=primary]) .button:disabled::-moz-placeholder, :host([variant=negative][rank=primary]) .button.disabled::-moz-placeholder, :host([variant=negative][rank=primary]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled::placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled::placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true]::placeholder,\n    :host([variant=negative][rank=primary]) .button:disabled::placeholder,\n    :host([variant=negative][rank=primary]) .button.disabled::placeholder,\n    :host([variant=negative][rank=primary]) .button[aria-disabled=true]::placeholder {\n      color: var(--text-disabled-color);\n    }\n    /* stylelint-enable */\n    :host([variant=negative][rank=secondary]) .button,\n    :host([variant=negative][rank=tertiary]) .button {\n      color: rgb(187, 0, 12);\n      --color: rgb(187, 0, 12);\n      border-color: transparent;\n      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n    }\n    :host([variant=negative][rank=secondary]) .button:not(:disabled, .disabled, [aria-disabled]):hover,\n    :host([variant=negative][rank=tertiary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(216, 26, 26);\n      color: rgb(255, 255, 255);\n      --background: rgb(216, 26, 26);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(216, 26, 26);\n    }\n    :host([variant=negative][rank=secondary]) .button[aria-selected=true], :host([variant=negative][rank=secondary]) .button:active, :host([variant=negative][rank=secondary]) .button.active, :host([variant=negative][rank=secondary]) .button.active:hover, :host([variant=negative][rank=secondary]) .button:active:hover,\n    :host([variant=negative][rank=tertiary]) .button[aria-selected=true],\n    :host([variant=negative][rank=tertiary]) .button:active,\n    :host([variant=negative][rank=tertiary]) .button.active,\n    :host([variant=negative][rank=tertiary]) .button.active:hover,\n    :host([variant=negative][rank=tertiary]) .button:active:hover {\n      background-color: rgb(187, 0, 12);\n      color: rgb(255, 255, 255);\n      --background: rgb(187, 0, 12);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(187, 0, 12);\n    }\n    :host([variant=negative][rank=secondary]) .button[aria-selected]:hover, :host([variant=negative][rank=secondary]) .button.active:hover, :host([variant=negative][rank=secondary]) .button:active:hover,\n    :host([variant=negative][rank=tertiary]) .button[aria-selected]:hover,\n    :host([variant=negative][rank=tertiary]) .button.active:hover,\n    :host([variant=negative][rank=tertiary]) .button:active:hover {\n      opacity: 0.9;\n    }\n    :host([variant=negative][rank=secondary]) .button:focus:not(:focus-visible),\n    :host([variant=negative][rank=tertiary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([variant=negative][rank=secondary]) .button:focus, :host([variant=negative][rank=secondary]) .button:focus-visible,\n    :host([variant=negative][rank=tertiary]) .button:focus,\n    :host([variant=negative][rank=tertiary]) .button:focus-visible {\n      outline-color: var(--gds-sys-color-focus-outline);\n      outline-style: solid;\n      outline-width: 0.125rem;\n      outline-offset: 0.125rem;\n    }\n    :host([variant=negative][rank=secondary]) .button {\n      border-color: rgb(187, 0, 12);\n    }\n    :host([variant=ghost]) .button {\n      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n      border-color: rgb(51, 51, 51);\n      color: rgb(51, 51, 51);\n      --color: rgb(51, 51, 51);\n    }\n    :host([variant=ghost]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background-color: rgb(51, 51, 51);\n      color: rgb(255, 255, 255);\n      --background: rgb(51, 51, 51);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(51, 51, 51);\n    }\n    :host([variant=ghost]) .button[aria-selected=true], :host([variant=ghost]) .button:active, :host([variant=ghost]) .button.active, :host([variant=ghost]) .button.active:hover, :host([variant=ghost]) .button:active:hover {\n      background-color: rgb(51, 51, 51);\n      color: rgb(255, 255, 255);\n      --background: rgb(51, 51, 51);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(51, 51, 51);\n    }\n    :host([variant=ghost]) .button[aria-selected]:hover, :host([variant=ghost]) .button.active:hover, :host([variant=ghost]) .button:active:hover {\n      opacity: 0.9;\n    }\n    :host([variant=ghost]) .button:focus-visible {\n      background-color: rgb(51, 51, 51);\n      color: rgb(255, 255, 255);\n      --background: rgb(51, 51, 51);\n      --color: rgb(255, 255, 255);\n      border-color: rgb(51, 51, 51) !important;\n    }\n    :host([variant=ghost]) .button:disabled, :host([variant=ghost]) .button.disabled, :host([variant=ghost]) .button[aria-disabled=true] {\n      color: var(--text-disabled-color) !important;\n      border-color: var(--border-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    :host([variant=ghost]) .button:disabled::-moz-placeholder, :host([variant=ghost]) .button.disabled::-moz-placeholder, :host([variant=ghost]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    :host([variant=ghost]) .button:disabled::placeholder, :host([variant=ghost]) .button.disabled::placeholder, :host([variant=ghost]) .button[aria-disabled=true]::placeholder {\n      color: var(--text-disabled-color);\n    }\n  }\n  @layer _overrides {\n    :host .button.icon {\n      padding: 0.75rem;\n      background: transparent;\n      border-width: 0px;\n      color: currentColor;\n    }\n    :host .button.icon:hover {\n      color: currentColor;\n      background: var(--grey-500);\n    }\n    :host .button.icon slot {\n      display: contents;\n    }\n    .button.icon.xs {\n      min-height: 1.5rem;\n      line-height: 0.75rem;\n      padding: 0.25rem;\n    }\n    .button.icon.small {\n      padding: 0.5rem;\n    }\n    .button.icon.large {\n      padding: 1rem;\n    }\n  }\n}";
+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}";
 export default styles;

package/components/card-linked/card-linked.component.d.ts

@@ -0,0 +1,12 @@
+import { GdsCard } from '../card/card.component';
+declare const GdsCardLinked_base: (new (...args: any[]) => import("../../utils/mixins/props-link").LinkProps) & typeof GdsCard;
+/**
+ * @element gds-card-linked
+ * @status beta
+ */
+export declare class GdsCardLinked extends GdsCardLinked_base {
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    static styleExpressionBaseSelector: string;
+    render(): any;
+}
+export {};

package/components/card-linked/card-linked.component.js

@@ -0,0 +1,33 @@
+import {
+  __decorateClass
+} from "../../chunks/chunk.QU3DSPNU.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { tokens } from "../../tokens.style.js";
+import {
+  gdsCustomElement,
+  html
+} from "../../utils/helpers/custom-element-scoping.js";
+import { withLinkProps } from "../../utils/mixins/props-link.js";
+import { GdsCard } from "../card/card.component.js";
+import CardLinkedStyles from "./card-linked.styles.js";
+let GdsCardLinked = class extends withLinkProps(GdsCard) {
+  render() {
+    return html`<a
+      href=${ifDefined(this.href)}
+      target=${ifDefined(this.target)}
+      rel=${ifDefined(this.rel)}
+      download=${ifDefined(this.download)}
+      tabindex="0"
+    >
+      <slot></slot>
+    </a>`;
+  }
+};
+GdsCardLinked.styles = [tokens, CardLinkedStyles];
+GdsCardLinked.styleExpressionBaseSelector = "a";
+GdsCardLinked = __decorateClass([
+  gdsCustomElement("gds-card-linked")
+], GdsCardLinked);
+export {
+  GdsCardLinked
+};

package/components/card-linked/card-linked.d.ts

@@ -0,0 +1,2 @@
+import { GdsCardLinked } from './card-linked.component';
+export { GdsCardLinked };

package/components/card-linked/card-linked.js

@@ -0,0 +1,6 @@
+import "../../chunks/chunk.QU3DSPNU.js";
+import { GdsCardLinked } from "./card-linked.component.js";
+GdsCardLinked.define();
+export {
+  GdsCardLinked
+};

package/components/card-linked/card-linked.styles.d.ts

@@ -0,0 +1,2 @@
+declare const style: import("lit").CSSResult;
+export default style;

package/components/card-linked/card-linked.styles.js

@@ -0,0 +1,56 @@
+import "../../chunks/chunk.QU3DSPNU.js";
+import { css } from "lit";
+const style = css`
+  :host {
+    display: contents;
+  }
+
+  a {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    border-color: var(--_border-color);
+    background-color: var(--_background-color);
+    color: var(--_color);
+    border-width: var(--gds-sys-space-5xs);
+    border-style: solid;
+    text-decoration: none;
+    cursor: pointer;
+    outline: solid var(--gds-sys-space-4xs) transparent;
+    outline-offset: var(--gds-sys-space-4xs);
+    transition-property: all;
+    transition-duration: var(--gds-sys-motion-duration-fastest);
+    transition-timing-function: var(--gds-sys-motion-easing-ease-in);
+
+    &:focus {
+      outline-color: var(--gds-sys-color-content-neutral-01);
+      outline-offset: var(--gds-sys-space-3xs);
+
+      &:not(:focus-visible) {
+        outline-color: transparent;
+      }
+    }
+
+    @media (pointer: fine) {
+      &:hover {
+        background-color: color-mix(
+          in srgb,
+          var(--gds-sys-color-l2-neutral-02),
+          var(--gds-sys-color-state-neutral-03)
+        );
+      }
+    }
+
+    &:active {
+      background-color: color-mix(
+        in srgb,
+        var(--gds-sys-color-l2-neutral-02),
+        var(--gds-sys-color-state-neutral-04)
+      );
+    }
+  }
+`;
+var card_linked_styles_default = style;
+export {
+  card_linked_styles_default as default
+};

package/components/card-linked/index.d.ts

@@ -0,0 +1 @@
+export * from './card-linked';

package/components/card-linked/index.js

@@ -0,0 +1 @@
+export * from "./card-linked.js";

package/components/context-menu/context-menu.component.d.ts

@@ -40,8 +40,8 @@ export declare class GdsContextMenu extends GdsContextMenu_base {
      * The placement of the popover relative to the trigger.
      */
     placement: Placement;
-    private elTriggerBtn;
-    private elIconSlot;
+    private _elTriggerSlot;
     connectedCallback(): void;
     render(): any;
+    private _handleOpenChange;
 }

package/components/context-menu/context-menu.component.js

@@ -2,20 +2,21 @@ import {
   __decorateClass,
   __privateAdd,
   __privateGet,
-  __privateMethod
+  __privateMethod,
+  __privateSet
 } from "../../chunks/chunk.QU3DSPNU.js";
-var _GdsContextMenu_instances, handleSlotChange_fn, _renderPopover, handleItemClick_fn;
+var _elTriggerBtn, _setupButton, _handleTriggerSlotChange, _renderPopover, _GdsContextMenu_instances, handleItemClick_fn;
 import { localized, msg } from "@lit/localize";
-import { property, queryAsync } from "lit/decorators.js";
+import { property, query } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import { GdsElement } from "../../gds-element.js";
 import { GdsMenuItem } from "../../primitives/menu/menu-item.component.js";
 import { GdsMenu } from "../../primitives/menu/menu.component.js";
 import { tokens } from "../../tokens.style.js";
 import { TransitionalStyles } from "../../transitional-styles.js";
+import { watch } from "../../utils/decorators/watch.js";
 import {
   gdsCustomElement,
-  getScopedTagName,
   html
 } from "../../utils/helpers/custom-element-scoping.js";
 import {
@@ -24,7 +25,10 @@ import {
 } from "../../utils/mixins/declarative-layout-mixins.js";
 import { GdsButton } from "../button/button.component.js";
 import { IconDotGridOneHorizontal } from "../icon/icons/dot-grid-one-horizontal.js";
-import { GdsPopover } from "../popover/popover.component.js";
+import {
+  applyTriggerAriaAttributes,
+  GdsPopover
+} from "../popover/popover.component.js";
 import { GdsMenuHeading } from "../../primitives/menu/menu-heading.component.js";
 let GdsContextMenu = class extends withMarginProps(
   withLayoutChildProps(GdsElement)
@@ -37,15 +41,44 @@ let GdsContextMenu = class extends withMarginProps(
     this.showLabel = false;
     this.label = "";
     this.placement = "bottom-start";
+    __privateAdd(this, _elTriggerBtn);
+    __privateAdd(this, _setupButton, () => {
+      if (!__privateGet(this, _elTriggerBtn))
+        __privateSet(this, _elTriggerBtn, this.shadowRoot?.querySelector("#trigger") ?? void 0);
+      const btn = __privateGet(this, _elTriggerBtn);
+      if (btn && !btn.hasAttribute("data-gds-context-menu-trigger")) {
+        btn.setAttribute("data-gds-context-menu-trigger", "true");
+        btn.addEventListener("click", () => {
+          this.open = !this.open;
+        });
+        btn.addEventListener("keydown", (e) => {
+          if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            this.open = true;
+          }
+        });
+        applyTriggerAriaAttributes(btn, this.open, "menu");
+      }
+    });
+    __privateAdd(this, _handleTriggerSlotChange, () => {
+      const triggerBtn = this._elTriggerSlot.assignedNodes({ flatten: true }).find((node) => {
+        return node instanceof HTMLElement;
+      });
+      if (triggerBtn) {
+        __privateSet(this, _elTriggerBtn, triggerBtn);
+      }
+      __privateGet(this, _setupButton).call(this);
+    });
     __privateAdd(this, _renderPopover, () => {
       return html`<gds-popover
       id="menu"
       autofocus
       .open=${this.open}
-      .triggerRef=${this.elTriggerBtn}
-      .anchorRef=${this.elTriggerBtn}
+      .triggerRef=${Promise.resolve(__privateGet(this, _elTriggerBtn))}
+      .anchorRef=${Promise.resolve(__privateGet(this, _elTriggerBtn))}
       .label=${this.label}
       .placement=${this.placement}
+      .popupRole=${"menu"}
       @gds-ui-state=${(e) => this.open = e.detail.open}
     >
       <gds-menu
@@ -60,53 +93,43 @@ let GdsContextMenu = class extends withMarginProps(
   connectedCallback() {
     super.connectedCallback();
     TransitionalStyles.instance.apply(this, "gds-context-menu");
-    __privateMethod(this, _GdsContextMenu_instances, handleSlotChange_fn).call(this);
+    this.updateComplete.then(__privateGet(this, _handleTriggerSlotChange));
     this.addEventListener("keydown", (e) => {
       if (this.open && e.key == "Tab") {
-        e.preventDefault();
         this.open = false;
-        this.elTriggerBtn.then((el) => el.focus());
+        e.preventDefault();
       }
     });
   }
   render() {
-    return html`<gds-button
-        .rank=${"secondary"}
-        id="trigger"
-        aria-haspopup="menu"
-        aria-controls="menu"
-        aria-expanded=${this.open}
-        label=${this.buttonLabel}
-        @click=${() => this.open = true}
-      >
-        ${this.showLabel ? html`<slot
-                name="icon"
-                slot="lead"
-                @slotchange=${__privateMethod(this, _GdsContextMenu_instances, handleSlotChange_fn)}
-              ></slot
-              >${this.buttonLabel}` : html`<slot
-              name="icon"
-              @slotchange=${__privateMethod(this, _GdsContextMenu_instances, handleSlotChange_fn)}
-            ></slot>`}
-      </gds-button>
+    return html`<slot
+        name="trigger"
+        @slotchange=${__privateGet(this, _handleTriggerSlotChange)}
+        ><gds-button
+          .rank=${"secondary"}
+          id="trigger"
+          label=${this.buttonLabel}
+        >
+          ${this.showLabel ? html`<slot name="icon" slot="lead"
+                  ><gds-icon-dot-grid-one-horizontal></gds-icon-dot-grid-one-horizontal></slot
+                >${this.buttonLabel}` : html`<slot name="icon"
+                ><gds-icon-dot-grid-one-horizontal></gds-icon-dot-grid-one-horizontal
+              ></slot>`}
+        </gds-button>
+      </slot>
       ${when(this.open, __privateGet(this, _renderPopover))}`;
   }
-};
-_GdsContextMenu_instances = new WeakSet();
-handleSlotChange_fn = function() {
-  this.elIconSlot.then((el) => {
-    if (!el.assignedNodes({ flatten: true }).some((node) => {
-      return node instanceof Element && node.tagName.toLowerCase().startsWith("gds-icon");
-    })) {
-      const defaultIcon = document.createElement(
-        getScopedTagName("gds-icon-dot-grid-one-horizontal")
-      );
-      el.appendChild(defaultIcon);
-      this.requestUpdate();
+  _handleOpenChange() {
+    if (!this.open) {
+      requestAnimationFrame(() => __privateGet(this, _elTriggerBtn)?.focus());
     }
-  });
+  }
 };
+_elTriggerBtn = new WeakMap();
+_setupButton = new WeakMap();
+_handleTriggerSlotChange = new WeakMap();
 _renderPopover = new WeakMap();
+_GdsContextMenu_instances = new WeakSet();
 handleItemClick_fn = function() {
   this.open = false;
 };
@@ -136,11 +159,11 @@ __decorateClass([
   property()
 ], GdsContextMenu.prototype, "placement", 2);
 __decorateClass([
-  queryAsync("#trigger")
-], GdsContextMenu.prototype, "elTriggerBtn", 2);
+  query('slot[name="trigger"]')
+], GdsContextMenu.prototype, "_elTriggerSlot", 2);
 __decorateClass([
-  queryAsync('slot[name="icon"]')
-], GdsContextMenu.prototype, "elIconSlot", 2);
+  watch("open", { waitUntilFirstUpdate: true })
+], GdsContextMenu.prototype, "_handleOpenChange", 1);
 GdsContextMenu = __decorateClass([
   gdsCustomElement("gds-context-menu", {
     dependsOn: [

package/components/div/div.component.d.ts

@@ -177,6 +177,21 @@ export declare class GdsDiv extends GdsDiv_base {
      * Supports all valid CSS `place-content` values.
      */
     'place-content'?: string;
+    /**
+     * Style Expression Property that controls the `aspect-ratio` property.
+     * Supports all valid CSS `aspect-ratio` values.
+     */
+    'aspect-ratio'?: string;
+    /**
+     * Style Expression Property that controls the `cursor` property.
+     * Supports all valid CSS `cursor` values.
+     */
+    cursor?: string;
+    /**
+     * Style Expression Property that controls the `pointer-events` property.
+     * Supports all valid CSS `pointer-events` values.
+     */
+    'pointer-events'?: string;
     render(): any;
 }
 export {};

package/components/div/div.component.js

@@ -156,6 +156,15 @@ __decorateClass([
 __decorateClass([
   styleExpressionProperty()
 ], GdsDiv.prototype, "place-content", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "aspect-ratio", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "cursor", 2);
+__decorateClass([
+  styleExpressionProperty()
+], GdsDiv.prototype, "pointer-events", 2);
 GdsDiv = __decorateClass([
   gdsCustomElement("gds-div")
 ], GdsDiv);

package/components/div/div.styles.js

@@ -8,12 +8,6 @@ const style = css`
     border-width: 0;
     border-color: var(--gds-sys-color-border-subtle-01);
   }
-  :host(:focus-visible) {
-    outline-color: color-mix(in srgb, currentcolor, #000 100%);
-    outline-offset: var(--gds-sys-space-4xs);
-    outline-style: solid;
-    outline-width: var(--gds-sys-space-4xs);
-  }
 `;
 var div_styles_default = style;
 export {

package/components/img/img.component.d.ts

@@ -1,5 +1,5 @@
 import { GdsElement } from '../../gds-element';
-declare const GdsImg_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").PositioningProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").MarginProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeXProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeYProps) & typeof GdsElement;
+declare const GdsImg_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").PositioningProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").MarginProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeXProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeYProps) & (new (...args: any[]) => import("../../utils/mixins/props-image").ImageProps) & typeof GdsElement;
 /**
  * @element gds-img
  *
@@ -59,18 +59,6 @@ export declare class GdsImg extends GdsImg_base {
      * @property position
      */
     'object-position'?: string;
-    /**
-     * The image source URL.
-     *
-     * @property src
-     */
-    src?: string;
-    /**
-     * The image alt text.
-     *
-     * @property alt
-     */
-    alt?: string;
     render(): any;
 }
 export {};

package/components/img/img.component.js

@@ -1,7 +1,6 @@
 import {
   __decorateClass
 } from "../../chunks/chunk.QU3DSPNU.js";
-import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { GdsElement } from "../../gds-element.js";
 import { tokens } from "../../tokens.style.js";
@@ -16,20 +15,25 @@ import {
   withSizeXProps,
   withSizeYProps
 } from "../../utils/mixins/declarative-layout-mixins.js";
+import { withImageProps } from "../../utils/mixins/props-image.js";
 import IMGStyles from "./img.styles.js";
 let GdsImg = class extends withPositioningProps(
-  withMarginProps(withSizeXProps(withSizeYProps(GdsElement)))
+  withMarginProps(withSizeXProps(withSizeYProps(withImageProps(GdsElement))))
 ) {
   render() {
     return html`<img
       src="${ifDefined(this.src)}"
       alt="${ifDefined(this.alt)}"
+      srcset=${ifDefined(this.srcset)}
+      sizes=${ifDefined(this.sizes)}
+      loading=${ifDefined(this.loading)}
+      decoding=${ifDefined(this.decoding)}
     />`;
   }
 };
 GdsImg.styles = [tokens, IMGStyles];
 __decorateClass([
-  styleExpressionProperty()
+  styleExpressionProperty({ selector: "img" })
 ], GdsImg.prototype, "aspect-ratio", 2);
 __decorateClass([
   styleExpressionProperty({
@@ -47,12 +51,6 @@ __decorateClass([
     selector: "img"
   })
 ], GdsImg.prototype, "object-position", 2);
-__decorateClass([
-  property()
-], GdsImg.prototype, "src", 2);
-__decorateClass([
-  property()
-], GdsImg.prototype, "alt", 2);
 GdsImg = __decorateClass([
   gdsCustomElement("gds-img")
 ], GdsImg);

package/components/index.d.ts

@@ -7,6 +7,7 @@ export * from './blur';
 export * from './breadcrumbs';
 export * from './button';
 export * from './card/card';
+export * from './card-linked/card-linked';
 export * from './checkbox';
 export * from './coachmark';
 export * from './context-menu';

package/components/index.js

@@ -7,6 +7,7 @@ export * from "./blur/index.js";
 export * from "./breadcrumbs/index.js";
 export * from "./button/index.js";
 export * from "./card/card.js";
+export * from "./card-linked/card-linked.js";
 export * from "./checkbox/index.js";
 export * from "./coachmark/index.js";
 export * from "./context-menu/index.js";

package/components/link/link.component.d.ts

@@ -1,5 +1,5 @@
 import { GdsElement } from '../../gds-element';
-declare const GdsLink_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").MarginProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeXProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").LayoutChildProps) & typeof GdsElement;
+declare const GdsLink_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").MarginProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeXProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").LayoutChildProps) & (new (...args: any[]) => import("../../utils/mixins/props-link").LinkProps) & typeof GdsElement;
 /**
  * @element gds-link
  *
@@ -14,18 +14,6 @@ export declare class GdsLink extends GdsLink_base {
     #private;
     static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     static shadowRootOptions: ShadowRootInit;
-    /**
-     * When set, the underlying button will be rendered as an anchor element.
-     */
-    href: string;
-    /**
-     * Where to display the linked URL. Only used when href is present.
-     */
-    target?: '_self' | '_blank' | '_parent' | '_top';
-    /**
-     * The relationship of the linked URL as space-separated link types. Only used when href is present. Defaults to "noreferrer noopener" for security reasons when target is set.
-     */
-    rel?: string;
     /**
      * Provides an accessible name for the link that will be read by screen readers.
      * Use this when:
@@ -45,10 +33,6 @@ export declare class GdsLink extends GdsLink_base {
      * </gds-link>
      */
     label: string;
-    /**
-     * Causes the browser to treat the linked URL as a download. Can be used with or without a filename value. Only used when href is present.
-     */
-    download?: string;
     /**
      * Controls the text-decoration property of the link.
      * Supports all valid CSS text-decoration values.