@sebgroup/green-core 2.35.1 → 2.36.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/components/button/button.trans.styles.scss.js +1 -1
  2. package/components/calendar/calendar.trans.styles.scss.js +1 -1
  3. package/components/context-menu/context-menu.trans.styles.scss.js +1 -1
  4. package/components/datepicker/datepicker.trans.styles.scss.js +1 -1
  5. package/components/dialog/dialog.component.d.ts +22 -2
  6. package/components/dialog/dialog.component.js +104 -23
  7. package/components/formatted-text/date/date-time-formatter.js +1 -3
  8. package/components/grouped-list/grouped-list.trans.styles.scss.js +1 -1
  9. package/components/pagination/pagination.component.js +11 -8
  10. package/components/popover/popover.trans.styles.scss.js +1 -1
  11. package/components/segmented-control/segment/segment.trans.styles.scss.js +1 -1
  12. package/components/segmented-control/segmented-control.trans.styles.css.js +1 -1
  13. package/components/table/table.component.d.ts +16 -1
  14. package/components/table/table.component.js +116 -190
  15. package/components/table/table.stories.data.d.ts +25 -47
  16. package/components/table/table.stories.data.js +261 -288
  17. package/components/table/table.styles.js +15 -2
  18. package/components/table/table.types.d.ts +16 -81
  19. package/components/table/table.types.js +40 -10
  20. package/components/theme/chlorophyll-tokens.scss.js +1 -1
  21. package/custom-elements.json +20809 -20571
  22. package/gds-element.js +1 -1
  23. package/generated/mcp/components.json +1 -1
  24. package/generated/mcp/dialog/api.md +8 -4
  25. package/generated/mcp/icons.json +1 -1
  26. package/generated/mcp/index.json +1 -1
  27. package/generated/mcp/table/api.md +2 -1
  28. package/generated/react/dialog/index.d.ts +2 -1
  29. package/generated/react/index.d.ts +1 -1
  30. package/generated/react/index.js +1 -1
  31. package/generated/react/table/index.d.ts +2 -1
  32. package/package.json +1 -1
  33. package/primitives/field-base/field-base.trans.styles.scss.js +1 -1
  34. package/primitives/listbox/listbox.trans.styles.scss.js +1 -1
  35. package/primitives/listbox/option.trans.styles.scss.js +1 -1
  36. package/primitives/menu/menu-heading.trans.styles.scss.js +1 -1
  37. package/utils/helpers/custom-element-scoping.js +1 -1
  38. package/utils/helpers/id.d.ts +0 -3
  39. package/utils/helpers/id.js +6 -1
package/components/button/button.trans.styles.scss.js CHANGED
@@ -1,2 +1,2 @@
1
- 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}";
1
+ const styles = "/* stylelint-disable max-nesting-depth */\n/**\n * Assert that a map is in ascending order\n * @mixin assert-ascending\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Assert that the first breakpoint in a map starts at zero\n * @mixin assert-starts-at-zero\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Check if a value is important\n * @function is-important\n * @param {Boolean} $important - Whether the value is important\n * @return {String} - \"!important\" if true, otherwise an empty string\n */\n/**\n * Replace a substring in a string\n * @function str-replace\n * @param {String} $string - The original string\n * @param {String} $search - The substring to replace\n * @param {String} $replace - The replacement string\n * @return {String} - The updated string\n */\n/**\n * Convert a map to its negative variant\n * @function negativify-map\n * @param {Map} $map - The map to convert\n * @return {Map} - The negative variant of the map\n */\n/**\n * Generate utility classes\n * @mixin generate-utility\n * @param {Map} $utility - Utility map\n * @param {String} $infix - Infix for class names\n * @param {Boolean} $is-rfs-media-query - Whether to use RFS media query\n */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * @function luminance\n * @param {Color} $color - The color to calculate luminance for\n * @return {Number} - The luminance value\n */\n/**\n * Calculate the contrast ratio between two colors.\n * @function color-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @return {Number} - The contrast ratio\n */\n/**\n * Remove the unit of a length\n * @function strip-unit\n * @param {Number} $number - Number to remove unit from\n * @return {Number} - Unitless number\n */\n/**\n * Validate font size\n * @function validate-font-size\n * @param {Number} $size - Font size to validate\n * @return {Number} - Validated font size in pixels\n */\n/**\n * Get ratio for WCAG level\n * @function get-ratio\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @return {Number} - Ratio value\n */\n/**\n * Determine if a color is light or dark\n * @function light-or-dark\n * @param {Color} $color - The color to check\n * @return {String} - \"light\" or \"dark\"\n */\n/**\n * Get the most legible color (black or white) for a given background color\n * @function most-legible-color\n * @param {Color} $color - The background color\n * @return {Color} - The most legible color\n */\n/**\n * Get the desired color combination for foreground and background colors\n * @function desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n * @return {List} - List containing background and foreground colors\n */\n/**\n * @mixin desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n */\n/**\n * Get an accessible color for a given foreground and background color\n * @function a11y-color\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @param {Number} $maxOffset - Maximum offset\n * @param {Boolean} $darkMode - Is dark mode\n * @param {Number} $ratio - Contrast ratio\n * @return {Color} - Accessible color\n */\n/**\n * Get the maximum contrast color\n * @function max-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Color} $max - Maximum contrast color\n * @return {Color} - Maximum contrast color\n */\n/**\n * Get the RGB values of a color as a string\n * @function stripped-rgb\n * @param {Color} $color - The color\n * @return {String} - RGB values as a string\n */\n/**\n * Get the HSL values of a color as a string\n * @function stripped-hsl\n * @param {Color} $color - The color\n * @return {String} - HSL values as a string\n */\n/**\n * Convert a map of colors to a map of HSL values\n * @function hsl-map\n * @param {Map} $colors - Map of colors\n * @return {Map} - Map of HSL values\n */\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/**\n * Breakpoint viewport sizes and media queries.\n *\n * Breakpoints are defined as a map of (name: minimum width), order from small to large:\n *\n * (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n *\n * The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n */\n/**\n * Name of the next breakpoint, or null for the last breakpoint.\n *\n * >> breakpoint-next(sm)\n * md\n * >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * md\n * >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n * md\n */\n/**\n * Minimum breakpoint width. Null for the smallest (first) breakpoint.\n *\n * >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * 576px\n */\n/**\n * Maximum breakpoint width.\n * The maximum value is reduced by 0.02px to work around the limitations of\n * `min-` and `max-` prefixes and viewports with fractional widths.\n * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n * See https://bugs.webkit.org/show_bug.cgi?id=178261\n *\n * >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * 767.98px\n */\n/**\n * Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n * Useful for making responsive utilities.\n *\n * >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * \"\" (Returns a blank string)\n * >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * \"-sm\"\n */\n/**\n * Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n * Makes the @content apply to the given breakpoint and wider.\n */\n/**\n * Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n * Makes the @content apply to the given breakpoint and narrower.\n */\n/**\n * Media that spans multiple breakpoint widths.\n * Makes the @content apply between the min and max breakpoints\n */\n/**\n * Media between the breakpoint's minimum and maximum widths.\n * No minimum for the smallest breakpoint, and no maximum for the largest one.\n * Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\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: 0.25rem;\n border: solid 1px var(--gds-sys-color-base-600);\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 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 var(--gds-sys-transition);\n }\n :host(:not([variant=ghost])) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n background: var(--gds-sys-color-dark-blue-1);\n color: var(--gds-sys-color-text-white);\n --background: var(--gds-sys-color-dark-blue-1);\n --color: var(--gds-sys-color-text-white);\n border-color: var(--gds-sys-color-dark-blue-1);\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: var(--gds-sys-color-dark-blue-2);\n color: var(--gds-sys-color-text-white);\n --background: $bg;\n --color: $color;\n border-color: var(--gds-sys-color-dark-blue-2);\n }\n :host(:not([variant=ghost])) .button {\n background: var(--gds-sys-color-dark-blue-2);\n border-color: var(--gds-sys-color-dark-blue-2);\n color: var(--gds-sys-color-text-white);\n --color: var(--gds-sys-color-text-white);\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(--gds-sys-color-base-300) !important;\n color: var(--gds-sys-color-text-disabled) !important;\n border-color: var(--gds-sys-color-text-disabled) !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(--gds-sys-color-text-disabled);\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(--gds-sys-color-text-disabled);\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 var(--gds-sys-transition);\n }\n :host([rank*=secondary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n background: var(--gds-sys-color-dark-blue-1);\n color: var(--gds-sys-color-text-white);\n --background: var(--gds-sys-color-dark-blue-1);\n --color: var(--gds-sys-color-text-white);\n border-color: var(--gds-sys-color-dark-blue-1);\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: var(--gds-sys-color-dark-blue-2);\n color: var(--gds-sys-color-text-white);\n --background: $bg;\n --color: $color;\n border-color: var(--gds-sys-color-dark-blue-2);\n }\n :host([rank*=secondary]) .button {\n background: transparent;\n border-color: var(--gds-sys-color-dark-blue-2);\n color: var(--gds-sys-color-dark-blue-2);\n --color: var(--gds-sys-color-dark-blue-2);\n }\n :host([rank*=secondary]) .button:disabled, :host([rank*=secondary]) .button.disabled, :host([rank*=secondary]) .button[aria-disabled=true] {\n background: var(--gds-sys-color-base-300) !important;\n color: var(--gds-sys-color-text-disabled) !important;\n border-color: var(--gds-sys-color-text-disabled) !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(--gds-sys-color-text-disabled);\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(--gds-sys-color-text-disabled);\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 var(--gds-sys-transition);\n }\n :host([rank*=tertiary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n background: var(--gds-sys-color-dark-blue-1);\n color: var(--gds-sys-color-text-white);\n --background: var(--gds-sys-color-dark-blue-1);\n --color: var(--gds-sys-color-text-white);\n border-color: var(--gds-sys-color-dark-blue-1);\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: var(--gds-sys-color-dark-blue-2);\n color: var(--gds-sys-color-text-white);\n --background: $bg;\n --color: $color;\n border-color: var(--gds-sys-color-dark-blue-2);\n }\n :host([rank*=tertiary]) .button {\n background: transparent;\n border-color: transparent;\n color: var(--gds-sys-color-dark-blue-2);\n --color: var(--gds-sys-color-dark-blue-2);\n }\n :host([rank*=tertiary]) .button:disabled, :host([rank*=tertiary]) .button.disabled, :host([rank*=tertiary]) .button[aria-disabled=true] {\n background: var(--gds-sys-color-base-300) !important;\n color: var(--gds-sys-color-text-disabled) !important;\n border-color: var(--gds-sys-color-text-disabled) !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(--gds-sys-color-text-disabled);\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(--gds-sys-color-text-disabled);\n }\n /* stylelint-disable */\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button,\n :host([variant=negative][rank=primary]) .button {\n background: var(--gds-sys-color-dark-red-1);\n border-color: var(--gds-sys-color-dark-red-1);\n color: var(--gds-sys-color-text-white);\n --color: var(--gds-sys-color-text-white);\n transition: border var(--gds-sys-transition);\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: var(--gds-sys-color-dark-red-1);\n color: var(--gds-sys-color-text-white);\n --background: var(--gds-sys-color-dark-red-1);\n --color: var(--gds-sys-color-text-white);\n border-color: var(--gds-sys-color-dark-red-1);\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: var(--gds-sys-color-dark-red-1);\n color: var(--gds-sys-color-text-white);\n --background: $bg;\n --color: $color;\n border-color: var(--gds-sys-color-dark-red-1);\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(--gds-sys-color-background-primary) !important;\n color: var(--gds-sys-color-text-white) !important;\n border-color: var(--gds-sys-color-dark-red-1) !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(--gds-sys-color-text-disabled);\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(--gds-sys-color-text-disabled);\n }\n /* stylelint-enable */\n :host([variant=negative][rank=secondary]) .button,\n :host([variant=negative][rank=tertiary]) .button {\n color: var(--gds-sys-color-dark-red-1);\n --color: var(--gds-sys-color-dark-red-1);\n border-color: transparent;\n transition: border var(--gds-sys-transition);\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: var(--gds-sys-color-dark-red-1);\n color: var(--gds-sys-color-text-white);\n --background: var(--gds-sys-color-dark-red-1);\n --color: var(--gds-sys-color-text-white);\n border-color: var(--gds-sys-color-dark-red-1);\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: var(--gds-sys-color-dark-red-1);\n color: var(--gds-sys-color-text-white);\n --background: $bg;\n --color: $color;\n border-color: var(--gds-sys-color-dark-red-1);\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: var(--gds-sys-color-dark-red-2);\n }\n :host([variant=ghost]) .button {\n transition: border var(--gds-sys-transition);\n }\n :host([variant=ghost]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n background: var(--gds-sys-color-base-800);\n color: var(--gds-sys-color-text-white);\n --background: var(--gds-sys-color-base-800);\n --color: var(--gds-sys-color-text-white);\n border-color: var(--gds-sys-color-base-800);\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: var(--gds-sys-color-base-800);\n color: var(--gds-sys-color-text-white);\n --background: $bg;\n --color: $color;\n border-color: var(--gds-sys-color-base-800);\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 {\n background-color: transparent;\n border-color: var(--gds-sys-color-base-800);\n color: var(--gds-sys-color-base-800);\n --color: var(--gds-sys-color-base-800);\n }\n :host([variant=ghost]) .button:disabled, :host([variant=ghost]) .button.disabled, :host([variant=ghost]) .button[aria-disabled=true] {\n color: var(--gds-sys-color-text-disabled) !important;\n border-color: var(--gds-sys-color-text-disabled) !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(--gds-sys-color-text-disabled);\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(--gds-sys-color-text-disabled);\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(--gds-sys-color-base-300);\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}";
2
2
  export default styles;
package/components/calendar/calendar.trans.styles.scss.js CHANGED
@@ -1,2 +1,2 @@
1
- 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}";
1
+ const styles = "/* stylelint-disable max-nesting-depth */\n/**\n * Assert that a map is in ascending order\n * @mixin assert-ascending\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Assert that the first breakpoint in a map starts at zero\n * @mixin assert-starts-at-zero\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Check if a value is important\n * @function is-important\n * @param {Boolean} $important - Whether the value is important\n * @return {String} - \"!important\" if true, otherwise an empty string\n */\n/**\n * Replace a substring in a string\n * @function str-replace\n * @param {String} $string - The original string\n * @param {String} $search - The substring to replace\n * @param {String} $replace - The replacement string\n * @return {String} - The updated string\n */\n/**\n * Convert a map to its negative variant\n * @function negativify-map\n * @param {Map} $map - The map to convert\n * @return {Map} - The negative variant of the map\n */\n/**\n * Generate utility classes\n * @mixin generate-utility\n * @param {Map} $utility - Utility map\n * @param {String} $infix - Infix for class names\n * @param {Boolean} $is-rfs-media-query - Whether to use RFS media query\n */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * @function luminance\n * @param {Color} $color - The color to calculate luminance for\n * @return {Number} - The luminance value\n */\n/**\n * Calculate the contrast ratio between two colors.\n * @function color-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @return {Number} - The contrast ratio\n */\n/**\n * Remove the unit of a length\n * @function strip-unit\n * @param {Number} $number - Number to remove unit from\n * @return {Number} - Unitless number\n */\n/**\n * Validate font size\n * @function validate-font-size\n * @param {Number} $size - Font size to validate\n * @return {Number} - Validated font size in pixels\n */\n/**\n * Get ratio for WCAG level\n * @function get-ratio\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @return {Number} - Ratio value\n */\n/**\n * Determine if a color is light or dark\n * @function light-or-dark\n * @param {Color} $color - The color to check\n * @return {String} - \"light\" or \"dark\"\n */\n/**\n * Get the most legible color (black or white) for a given background color\n * @function most-legible-color\n * @param {Color} $color - The background color\n * @return {Color} - The most legible color\n */\n/**\n * Get the desired color combination for foreground and background colors\n * @function desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n * @return {List} - List containing background and foreground colors\n */\n/**\n * @mixin desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n */\n/**\n * Get an accessible color for a given foreground and background color\n * @function a11y-color\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @param {Number} $maxOffset - Maximum offset\n * @param {Boolean} $darkMode - Is dark mode\n * @param {Number} $ratio - Contrast ratio\n * @return {Color} - Accessible color\n */\n/**\n * Get the maximum contrast color\n * @function max-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Color} $max - Maximum contrast color\n * @return {Color} - Maximum contrast color\n */\n/**\n * Get the RGB values of a color as a string\n * @function stripped-rgb\n * @param {Color} $color - The color\n * @return {String} - RGB values as a string\n */\n/**\n * Get the HSL values of a color as a string\n * @function stripped-hsl\n * @param {Color} $color - The color\n * @return {String} - HSL values as a string\n */\n/**\n * Convert a map of colors to a map of HSL values\n * @function hsl-map\n * @param {Map} $colors - Map of colors\n * @return {Map} - Map of HSL values\n */\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/**\n * Breakpoint viewport sizes and media queries.\n *\n * Breakpoints are defined as a map of (name: minimum width), order from small to large:\n *\n * (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n *\n * The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n */\n/**\n * Name of the next breakpoint, or null for the last breakpoint.\n *\n * >> breakpoint-next(sm)\n * md\n * >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * md\n * >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n * md\n */\n/**\n * Minimum breakpoint width. Null for the smallest (first) breakpoint.\n *\n * >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * 576px\n */\n/**\n * Maximum breakpoint width.\n * The maximum value is reduced by 0.02px to work around the limitations of\n * `min-` and `max-` prefixes and viewports with fractional widths.\n * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n * See https://bugs.webkit.org/show_bug.cgi?id=178261\n *\n * >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * 767.98px\n */\n/**\n * Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n * Useful for making responsive utilities.\n *\n * >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * \"\" (Returns a blank string)\n * >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * \"-sm\"\n */\n/**\n * Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n * Makes the @content apply to the given breakpoint and wider.\n */\n/**\n * Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n * Makes the @content apply to the given breakpoint and narrower.\n */\n/**\n * Media that spans multiple breakpoint widths.\n * Makes the @content apply between the min and max breakpoints\n */\n/**\n * Media between the breakpoint's minimum and maximum widths.\n * No minimum for the smallest breakpoint, and no maximum for the largest one.\n * Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n */\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(--gds-sys-color-background-primary);\n border-bottom: solid 1px var(--gds-sys-color-base-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(--gds-sys-color-background-primary);\n color: var(--gds-sys-color-text-error);\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(--gds-sys-color-base-800);\n color: var(--gds-sys-color-base-800);\n }\n :host tbody td {\n /* hover */\n }\n :host tbody td:hover:not(.disabled) {\n background: var(--gds-sys-color-base-300);\n border: solid 1px var(--gds-sys-color-background-primary);\n border-radius: 4px;\n color: var(--gds-sys-color-text-primary);\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(--gds-sys-color-background-primary);\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(--gds-sys-color-base-800);\n border: solid 1px var(--gds-sys-color-background-primary);\n border-radius: 4px;\n color: var(--gds-sys-color-text-inverted);\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(--gds-sys-color-base-800);\n border: solid 1px var(--gds-sys-color-background-primary);\n border-radius: 4px;\n color: var(--gds-sys-color-text-inverted);\n }\n :host tbody td {\n /* disabled */\n }\n :host tbody td.disabled {\n background: var(--gds-sys-color-base-200);\n border: solid 1px var(--gds-sys-color-background-primary);\n border-radius: 4px;\n color: var(--gds-sys-color-text-disabled);\n cursor: not-allowed;\n font-weight: 400;\n }\n :host tbody td.disabled.sg-date-holiday {\n color: var(--gds-sys-color-text-error);\n }\n :host tbody td.disabled .number,\n :host tbody td.disabled .indicator-dot {\n --_color: var(--gds-sys-color-text-disabled) !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-sys-color-base-300);\n font-weight: 400;\n pointer-events: none;\n }\n }\n}";
2
2
  export default styles;
package/components/context-menu/context-menu.trans.styles.scss.js CHANGED
@@ -1,2 +1,2 @@
1
- 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}";
1
+ const styles = "/* stylelint-disable max-nesting-depth */\n/**\n * Assert that a map is in ascending order\n * @mixin assert-ascending\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Assert that the first breakpoint in a map starts at zero\n * @mixin assert-starts-at-zero\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Check if a value is important\n * @function is-important\n * @param {Boolean} $important - Whether the value is important\n * @return {String} - \"!important\" if true, otherwise an empty string\n */\n/**\n * Replace a substring in a string\n * @function str-replace\n * @param {String} $string - The original string\n * @param {String} $search - The substring to replace\n * @param {String} $replace - The replacement string\n * @return {String} - The updated string\n */\n/**\n * Convert a map to its negative variant\n * @function negativify-map\n * @param {Map} $map - The map to convert\n * @return {Map} - The negative variant of the map\n */\n/**\n * Generate utility classes\n * @mixin generate-utility\n * @param {Map} $utility - Utility map\n * @param {String} $infix - Infix for class names\n * @param {Boolean} $is-rfs-media-query - Whether to use RFS media query\n */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * @function luminance\n * @param {Color} $color - The color to calculate luminance for\n * @return {Number} - The luminance value\n */\n/**\n * Calculate the contrast ratio between two colors.\n * @function color-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @return {Number} - The contrast ratio\n */\n/**\n * Remove the unit of a length\n * @function strip-unit\n * @param {Number} $number - Number to remove unit from\n * @return {Number} - Unitless number\n */\n/**\n * Validate font size\n * @function validate-font-size\n * @param {Number} $size - Font size to validate\n * @return {Number} - Validated font size in pixels\n */\n/**\n * Get ratio for WCAG level\n * @function get-ratio\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @return {Number} - Ratio value\n */\n/**\n * Determine if a color is light or dark\n * @function light-or-dark\n * @param {Color} $color - The color to check\n * @return {String} - \"light\" or \"dark\"\n */\n/**\n * Get the most legible color (black or white) for a given background color\n * @function most-legible-color\n * @param {Color} $color - The background color\n * @return {Color} - The most legible color\n */\n/**\n * Get the desired color combination for foreground and background colors\n * @function desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n * @return {List} - List containing background and foreground colors\n */\n/**\n * @mixin desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n */\n/**\n * Get an accessible color for a given foreground and background color\n * @function a11y-color\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @param {Number} $maxOffset - Maximum offset\n * @param {Boolean} $darkMode - Is dark mode\n * @param {Number} $ratio - Contrast ratio\n * @return {Color} - Accessible color\n */\n/**\n * Get the maximum contrast color\n * @function max-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Color} $max - Maximum contrast color\n * @return {Color} - Maximum contrast color\n */\n/**\n * Get the RGB values of a color as a string\n * @function stripped-rgb\n * @param {Color} $color - The color\n * @return {String} - RGB values as a string\n */\n/**\n * Get the HSL values of a color as a string\n * @function stripped-hsl\n * @param {Color} $color - The color\n * @return {String} - HSL values as a string\n */\n/**\n * Convert a map of colors to a map of HSL values\n * @function hsl-map\n * @param {Map} $colors - Map of colors\n * @return {Map} - Map of HSL values\n */\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/**\n * Breakpoint viewport sizes and media queries.\n *\n * Breakpoints are defined as a map of (name: minimum width), order from small to large:\n *\n * (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n *\n * The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n */\n/**\n * Name of the next breakpoint, or null for the last breakpoint.\n *\n * >> breakpoint-next(sm)\n * md\n * >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * md\n * >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n * md\n */\n/**\n * Minimum breakpoint width. Null for the smallest (first) breakpoint.\n *\n * >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * 576px\n */\n/**\n * Maximum breakpoint width.\n * The maximum value is reduced by 0.02px to work around the limitations of\n * `min-` and `max-` prefixes and viewports with fractional widths.\n * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n * See https://bugs.webkit.org/show_bug.cgi?id=178261\n *\n * >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * 767.98px\n */\n/**\n * Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n * Useful for making responsive utilities.\n *\n * >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * \"\" (Returns a blank string)\n * >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * \"-sm\"\n */\n/**\n * Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n * Makes the @content apply to the given breakpoint and wider.\n */\n/**\n * Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n * Makes the @content apply to the given breakpoint and narrower.\n */\n/**\n * Media that spans multiple breakpoint widths.\n * Makes the @content apply between the min and max breakpoints\n */\n/**\n * Media between the breakpoint's minimum and maximum widths.\n * No minimum for the smallest breakpoint, and no maximum for the largest one.\n * Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\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: 0.25rem;\n border: solid 1px var(--gds-sys-color-base-600);\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 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 .gds-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 var(--gds-sys-transition);\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-sys-color-base-800);\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-sys-color-base-300);\n }\n }\n}";
2
2
  export default styles;
package/components/datepicker/datepicker.trans.styles.scss.js CHANGED
@@ -1,2 +1,2 @@
1
- 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@layer base, reset, transitional-styles;\n@layer transitional-styles {\n :host {\n display: flex;\n flex-direction: column;\n width: 100%;\n contain: layout;\n isolation: isolate;\n gap: var(--gds-sys-space-xs);\n }\n [role=spinbutton] {\n display: inline-block;\n }\n [role=spinbutton]:focus {\n background: color-mix(in srgb, var(--gds-sys-color-blue) 50%, transparent);\n outline: none;\n }\n [role=spinbutton]::-moz-selection {\n background: transparent;\n }\n [role=spinbutton]::selection {\n background: transparent;\n }\n}";
1
+ const styles = "/* stylelint-disable max-nesting-depth */\n/**\n * Assert that a map is in ascending order\n * @mixin assert-ascending\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Assert that the first breakpoint in a map starts at zero\n * @mixin assert-starts-at-zero\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Check if a value is important\n * @function is-important\n * @param {Boolean} $important - Whether the value is important\n * @return {String} - \"!important\" if true, otherwise an empty string\n */\n/**\n * Replace a substring in a string\n * @function str-replace\n * @param {String} $string - The original string\n * @param {String} $search - The substring to replace\n * @param {String} $replace - The replacement string\n * @return {String} - The updated string\n */\n/**\n * Convert a map to its negative variant\n * @function negativify-map\n * @param {Map} $map - The map to convert\n * @return {Map} - The negative variant of the map\n */\n/**\n * Generate utility classes\n * @mixin generate-utility\n * @param {Map} $utility - Utility map\n * @param {String} $infix - Infix for class names\n * @param {Boolean} $is-rfs-media-query - Whether to use RFS media query\n */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * @function luminance\n * @param {Color} $color - The color to calculate luminance for\n * @return {Number} - The luminance value\n */\n/**\n * Calculate the contrast ratio between two colors.\n * @function color-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @return {Number} - The contrast ratio\n */\n/**\n * Remove the unit of a length\n * @function strip-unit\n * @param {Number} $number - Number to remove unit from\n * @return {Number} - Unitless number\n */\n/**\n * Validate font size\n * @function validate-font-size\n * @param {Number} $size - Font size to validate\n * @return {Number} - Validated font size in pixels\n */\n/**\n * Get ratio for WCAG level\n * @function get-ratio\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @return {Number} - Ratio value\n */\n/**\n * Determine if a color is light or dark\n * @function light-or-dark\n * @param {Color} $color - The color to check\n * @return {String} - \"light\" or \"dark\"\n */\n/**\n * Get the most legible color (black or white) for a given background color\n * @function most-legible-color\n * @param {Color} $color - The background color\n * @return {Color} - The most legible color\n */\n/**\n * Get the desired color combination for foreground and background colors\n * @function desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n * @return {List} - List containing background and foreground colors\n */\n/**\n * @mixin desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n */\n/**\n * Get an accessible color for a given foreground and background color\n * @function a11y-color\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @param {Number} $maxOffset - Maximum offset\n * @param {Boolean} $darkMode - Is dark mode\n * @param {Number} $ratio - Contrast ratio\n * @return {Color} - Accessible color\n */\n/**\n * Get the maximum contrast color\n * @function max-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Color} $max - Maximum contrast color\n * @return {Color} - Maximum contrast color\n */\n/**\n * Get the RGB values of a color as a string\n * @function stripped-rgb\n * @param {Color} $color - The color\n * @return {String} - RGB values as a string\n */\n/**\n * Get the HSL values of a color as a string\n * @function stripped-hsl\n * @param {Color} $color - The color\n * @return {String} - HSL values as a string\n */\n/**\n * Convert a map of colors to a map of HSL values\n * @function hsl-map\n * @param {Map} $colors - Map of colors\n * @return {Map} - Map of HSL values\n */\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/**\n * Breakpoint viewport sizes and media queries.\n *\n * Breakpoints are defined as a map of (name: minimum width), order from small to large:\n *\n * (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n *\n * The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n */\n/**\n * Name of the next breakpoint, or null for the last breakpoint.\n *\n * >> breakpoint-next(sm)\n * md\n * >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * md\n * >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n * md\n */\n/**\n * Minimum breakpoint width. Null for the smallest (first) breakpoint.\n *\n * >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * 576px\n */\n/**\n * Maximum breakpoint width.\n * The maximum value is reduced by 0.02px to work around the limitations of\n * `min-` and `max-` prefixes and viewports with fractional widths.\n * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n * See https://bugs.webkit.org/show_bug.cgi?id=178261\n *\n * >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * 767.98px\n */\n/**\n * Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n * Useful for making responsive utilities.\n *\n * >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * \"\" (Returns a blank string)\n * >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * \"-sm\"\n */\n/**\n * Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n * Makes the @content apply to the given breakpoint and wider.\n */\n/**\n * Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n * Makes the @content apply to the given breakpoint and narrower.\n */\n/**\n * Media that spans multiple breakpoint widths.\n * Makes the @content apply between the min and max breakpoints\n */\n/**\n * Media between the breakpoint's minimum and maximum widths.\n * No minimum for the smallest breakpoint, and no maximum for the largest one.\n * Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n :host {\n display: flex;\n flex-direction: column;\n width: 100%;\n contain: layout;\n isolation: isolate;\n gap: var(--gds-sys-space-xs);\n }\n [role=spinbutton] {\n display: inline-block;\n }\n [role=spinbutton]:focus {\n background: color-mix(in srgb, var(--gds-sys-color-blue) 50%, transparent);\n outline: none;\n }\n [role=spinbutton]::-moz-selection {\n background: transparent;\n }\n [role=spinbutton]::selection {\n background: transparent;\n }\n}";
2
2
  export default styles;
package/components/dialog/dialog.component.d.ts CHANGED
@@ -19,6 +19,9 @@ export declare class GdsDialog extends GdsDialog_base {
19
19
  /**
20
20
  * Whether the dialog is open. The state of the dialog can be controlled either
21
21
  * by setting this property or by calling the `show()` and `close()` methods.
22
+ *
23
+ * When the state is explicitly changed by setting this prop, the state change cannot
24
+ * be cancelled by events.
22
25
  */
23
26
  open: boolean;
24
27
  /**
@@ -41,17 +44,34 @@ export declare class GdsDialog extends GdsDialog_base {
41
44
  * styles to the content inside the `dialog` slot.
42
45
  */
43
46
  scrollable: boolean;
47
+ /**
48
+ * Controls which user actions can close the dialog. Maps to the native `<dialog>` `closedby` attribute.
49
+ *
50
+ * - `closerequest` (default): The dialog can be dismissed by platform close gestures (Escape key, iOS swipe, etc.).
51
+ * The browser's anti-abuse mechanism applies: after one cancelled close request, subsequent cancellations
52
+ * require a user activation in between. This ensures the best mobile UX.
53
+ * - `none`: The dialog can only be closed by developer-specified mechanisms (buttons, click outside, or programmatic API).
54
+ * A manual Escape key listener is added for desktop users, with fully cancellable behavior (no anti-abuse limit).
55
+ * Mobile platform close gestures may not work in this mode.
56
+ * - `any`: The dialog can also be dismissed by light dismiss (clicking outside). Note that gds-dialog already
57
+ * handles click-outside via its own mechanism.
58
+ */
59
+ closedby: 'closerequest' | 'none' | 'any';
44
60
  private _elDialog;
45
61
  private _elTriggerSlot;
46
62
  /**
47
63
  * Opens the dialog.
64
+ * This is a programmatic API that always opens the dialog.
65
+ * Events are dispatched for notification when a reason is provided, but cancellation is not honored.
48
66
  */
49
67
  show(reason?: string): void;
50
68
  /**
51
69
  * Closes the dialog.
52
- * @param returnValue - The value to return when the dialog is closed.
70
+ * This is a programmatic API that always closes the dialog.
71
+ * Events are dispatched for notification when a reason is provided, but cancellation is not honored.
72
+ * @param reason - The reason for closing the dialog.
53
73
  */
54
- close(reason: string): void;
74
+ close(reason?: string): void;
55
75
  disconnectedCallback(): void;
56
76
  render(): any;
57
77
  private _handleOpenChange;
package/components/dialog/dialog.component.js CHANGED
@@ -5,7 +5,7 @@ import {
5
5
  __privateMethod,
6
6
  __privateSet
7
7
  } from "../../chunks/chunk.QU3DSPNU.js";
8
- var _returnValue, _clickStartedInside, _handleNativeClose, _dispatchCloseEvent, _dispatchShowEvent, _dispatchUiStateEvent, _GdsDialog_instances, handleTriggerSlotChange_fn, _handleTriggerClick, _handleClickOutside;
8
+ var _returnValue, _clickStartedInside, _skipEvents, _requestClose, _requestShow, _handleCancel, _handleKeydown, _handleNativeClose, _dispatchCloseEvent, _dispatchShowEvent, _dispatchUiStateEvent, _GdsDialog_instances, handleTriggerSlotChange_fn, _handleTriggerClick, _handleClickOutside;
9
9
  import { localized, msg } from "@lit/localize";
10
10
  import { nothing } from "lit";
11
11
  import { property, query } from "lit/decorators.js";
@@ -46,20 +46,80 @@ let GdsDialog = class extends withSizeXProps(
46
46
  this.variant = "default";
47
47
  this.placement = "initial";
48
48
  this.scrollable = false;
49
+ this.closedby = "closerequest";
49
50
  __privateAdd(this, _returnValue);
50
51
  __privateAdd(this, _clickStartedInside, false);
51
- __privateAdd(this, _handleNativeClose, (e) => {
52
- const dialog = e.target;
53
- let returnValue = dialog.returnValue;
54
- if (returnValue !== "prop-change") {
55
- returnValue = returnValue || "native-close";
56
- if (!__privateGet(this, _dispatchCloseEvent).call(this, returnValue)) {
57
- return;
58
- }
59
- this.close(returnValue);
60
- return;
52
+ /**
53
+ * Whether event dispatch should be skipped in _handleOpenChange.
54
+ * Set to true when events have already been dispatched by #requestClose/#requestShow.
55
+ */
56
+ __privateAdd(this, _skipEvents, false);
57
+ /**
58
+ * Requests the dialog to close. Events are dispatched before closing,
59
+ * and the close can be cancelled by calling preventDefault() on the gds-ui-state event.
60
+ * Used internally by built-in close triggers (buttons, escape, click outside).
61
+ */
62
+ __privateAdd(this, _requestClose, (reason) => {
63
+ if (__privateGet(this, _dispatchCloseEvent).call(this, reason)) {
64
+ __privateSet(this, _skipEvents, true);
65
+ this.close(reason);
66
+ __privateSet(this, _skipEvents, false);
67
+ }
68
+ });
69
+ /**
70
+ * Requests the dialog to open. Events are dispatched before opening,
71
+ * and the open can be cancelled by calling preventDefault() on the gds-ui-state event.
72
+ * Used internally by built-in open triggers (slotted trigger button).
73
+ */
74
+ __privateAdd(this, _requestShow, (reason) => {
75
+ if (__privateGet(this, _dispatchShowEvent).call(this, reason)) {
76
+ __privateSet(this, _skipEvents, true);
77
+ this.show(reason);
78
+ __privateSet(this, _skipEvents, false);
79
+ }
80
+ });
81
+ /**
82
+ * Intercepts the native cancel event (fired on Escape) to prevent the browser
83
+ * from closing the dialog before we can dispatch cancellable events.
84
+ *
85
+ * Note: When closedby is 'closerequest', the browser's anti-abuse mechanism may
86
+ * override preventDefault() on repeated Escape presses without user activation
87
+ * in between, causing a forced close. In that case, #handleNativeClose will
88
+ * sync the wrapper state.
89
+ */
90
+ __privateAdd(this, _handleCancel, (e) => {
91
+ e.preventDefault();
92
+ __privateGet(this, _requestClose).call(this, "native-close");
93
+ });
94
+ /**
95
+ * Manual keydown handler for Escape when closedby='none'.
96
+ * Since the browser won't fire cancel events in this mode, we listen
97
+ * for Escape ourselves and route through the cancellable #requestClose flow.
98
+ */
99
+ __privateAdd(this, _handleKeydown, (e) => {
100
+ if (e.key === "Escape") {
101
+ e.preventDefault();
102
+ __privateGet(this, _requestClose).call(this, "native-close");
103
+ }
104
+ });
105
+ /**
106
+ * Handles the native close event from the underlying <dialog> element.
107
+ *
108
+ * This fires in two scenarios:
109
+ * 1. Our own code calls _elDialog.close() via _handleOpenChange — events are already handled,
110
+ * and this.open is already false.
111
+ * 2. The browser force-closes the dialog (anti-abuse override on repeated Escape) — this.open
112
+ * is still true, and we need to sync state and dispatch events.
113
+ */
114
+ __privateAdd(this, _handleNativeClose, (_e) => {
115
+ if (this.open) {
116
+ __privateSet(this, _skipEvents, true);
117
+ this.close("native-close");
118
+ __privateSet(this, _skipEvents, false);
119
+ __privateGet(this, _dispatchCloseEvent).call(this, "native-close");
120
+ } else if (!__privateGet(this, _skipEvents) && __privateGet(this, _returnValue) && __privateGet(this, _returnValue) !== "prop-change") {
121
+ __privateGet(this, _dispatchCloseEvent).call(this, __privateGet(this, _returnValue));
61
122
  }
62
- this.close(returnValue);
63
123
  });
64
124
  __privateAdd(this, _dispatchCloseEvent, (reason) => {
65
125
  if (__privateGet(this, _dispatchUiStateEvent).call(this, reason)) {
@@ -85,7 +145,7 @@ let GdsDialog = class extends withSizeXProps(
85
145
  });
86
146
  });
87
147
  __privateAdd(this, _handleTriggerClick, (e) => {
88
- this.show("slotted-trigger");
148
+ __privateGet(this, _requestShow).call(this, "slotted-trigger");
89
149
  });
90
150
  __privateAdd(this, _handleClickOutside, (evt) => {
91
151
  const e = evt;
@@ -94,9 +154,8 @@ let GdsDialog = class extends withSizeXProps(
94
154
  if (isNotEnterKey && e.target === this && dialog && this.open) {
95
155
  const rect = dialog.getBoundingClientRect();
96
156
  const isInDialog = rect.top <= e.clientY && e.clientY <= rect.top + rect.height && rect.left <= e.clientX && e.clientX <= rect.left + rect.width;
97
- const closeReason = "click-outside";
98
- if (!isInDialog && !__privateGet(this, _clickStartedInside) && __privateGet(this, _dispatchCloseEvent).call(this, closeReason)) {
99
- this.close(closeReason);
157
+ if (!isInDialog && !__privateGet(this, _clickStartedInside)) {
158
+ __privateGet(this, _requestClose).call(this, "click-outside");
100
159
  }
101
160
  }
102
161
  __privateSet(this, _clickStartedInside, false);
@@ -104,14 +163,20 @@ let GdsDialog = class extends withSizeXProps(
104
163
  }
105
164
  /**
106
165
  * Opens the dialog.
166
+ * This is a programmatic API that always opens the dialog.
167
+ * Events are dispatched for notification when a reason is provided, but cancellation is not honored.
107
168
  */
108
169
  show(reason) {
109
170
  this.open = true;
110
- reason && __privateGet(this, _dispatchShowEvent).call(this, reason);
171
+ if (reason) {
172
+ __privateGet(this, _dispatchShowEvent).call(this, reason);
173
+ }
111
174
  }
112
175
  /**
113
176
  * Closes the dialog.
114
- * @param returnValue - The value to return when the dialog is closed.
177
+ * This is a programmatic API that always closes the dialog.
178
+ * Events are dispatched for notification when a reason is provided, but cancellation is not honored.
179
+ * @param reason - The reason for closing the dialog.
115
180
  */
116
181
  close(reason) {
117
182
  __privateSet(this, _returnValue, reason);
@@ -129,7 +194,8 @@ let GdsDialog = class extends withSizeXProps(
129
194
  ${when(
130
195
  this.open,
131
196
  () => html`<dialog
132
- closedby="closerequest"
197
+ closedby=${this.closedby}
198
+ @cancel=${__privateGet(this, _handleCancel)}
133
199
  @close=${__privateGet(this, _handleNativeClose)}
134
200
  class=${classMap({
135
201
  [this.variant]: true,
@@ -155,7 +221,7 @@ let GdsDialog = class extends withSizeXProps(
155
221
  rank="tertiary"
156
222
  size="small"
157
223
  label=${msg("Close")}
158
- @click=${() => this.close("btn-close")}
224
+ @click=${() => __privateGet(this, _requestClose).call(this, "btn-close")}
159
225
  >
160
226
  <gds-icon-cross-large
161
227
  size="m"
@@ -180,11 +246,14 @@ let GdsDialog = class extends withSizeXProps(
180
246
  <slot name="footer">
181
247
  <gds-button
182
248
  value="cancel"
183
- @click=${() => this.close("btn-cancel")}
249
+ @click=${() => __privateGet(this, _requestClose).call(this, "btn-cancel")}
184
250
  rank="secondary"
185
251
  >${msg("Cancel")}</gds-button
186
252
  >
187
- <gds-button value="ok" @click=${() => this.close("btn-ok")}>
253
+ <gds-button
254
+ value="ok"
255
+ @click=${() => __privateGet(this, _requestClose).call(this, "btn-ok")}
256
+ >
188
257
  Ok
189
258
  </gds-button>
190
259
  </slot>
@@ -204,13 +273,17 @@ let GdsDialog = class extends withSizeXProps(
204
273
  requestAnimationFrame(
205
274
  () => this.addEventListener("click", __privateGet(this, _handleClickOutside))
206
275
  );
276
+ if (this.closedby === "none") {
277
+ this._elDialog?.addEventListener("keydown", __privateGet(this, _handleKeydown));
278
+ }
207
279
  if (isIOS) {
208
280
  this._elDialog?.focus();
209
281
  }
210
282
  });
211
283
  } else {
212
284
  __privateSet(this, _returnValue, __privateGet(this, _returnValue) || "prop-change");
213
- this._elDialog?.close(__privateGet(this, _returnValue));
285
+ this._elDialog?.removeEventListener("keydown", __privateGet(this, _handleKeydown));
286
+ this._elDialog?.close();
214
287
  unlockBodyScrolling(this);
215
288
  document.removeEventListener("click", __privateGet(this, _handleClickOutside));
216
289
  this.requestUpdate("open");
@@ -219,6 +292,11 @@ let GdsDialog = class extends withSizeXProps(
219
292
  };
220
293
  _returnValue = new WeakMap();
221
294
  _clickStartedInside = new WeakMap();
295
+ _skipEvents = new WeakMap();
296
+ _requestClose = new WeakMap();
297
+ _requestShow = new WeakMap();
298
+ _handleCancel = new WeakMap();
299
+ _handleKeydown = new WeakMap();
222
300
  _handleNativeClose = new WeakMap();
223
301
  _dispatchCloseEvent = new WeakMap();
224
302
  _dispatchShowEvent = new WeakMap();
@@ -250,6 +328,9 @@ __decorateClass([
250
328
  __decorateClass([
251
329
  property({ type: Boolean })
252
330
  ], GdsDialog.prototype, "scrollable", 2);
331
+ __decorateClass([
332
+ property({ reflect: true })
333
+ ], GdsDialog.prototype, "closedby", 2);
253
334
  __decorateClass([
254
335
  query("dialog")
255
336
  ], GdsDialog.prototype, "_elDialog", 2);
package/components/formatted-text/date/date-time-formatter.js CHANGED
@@ -12,9 +12,7 @@ const dateTimeFormats = {
12
12
  dateLong: (value, locale) => new Intl.DateTimeFormat(locale, { dateStyle: "long" }).format(
13
13
  convertValueToDate(value)
14
14
  ),
15
- dateLongWithWeekday: (value, locale) => new Intl.DateTimeFormat(locale, { dateStyle: "full" }).format(
16
- convertValueToDate(value)
17
- ),
15
+ dateLongWithWeekday: (value, locale) => new Intl.DateTimeFormat(locale, { dateStyle: "full" }).format(convertValueToDate(value)).replace(",", ""),
18
16
  dateShort: (value, locale) => {
19
17
  const formatter = new Intl.DateTimeFormat(locale, { dateStyle: "medium" });
20
18
  if (locale?.toLowerCase() === "sv-se") {
package/components/grouped-list/grouped-list.trans.styles.scss.js CHANGED
@@ -1,2 +1,2 @@
1
- const styles = "@layer base, reset, transitional-styles;\n@layer transitional-styles {\n @layer _base, _overrides;\n :host {\n display: block;\n list-style: none;\n }\n @layer _base {\n .gds-list-heading {\n background-color: var(--gds-ref-pallet-base200, #e9e9e9);\n font-size: 0.875rem;\n font-weight: 500;\n padding: 0.5rem 1rem;\n }\n ::slotted([gds-element=gds-list-item]) {\n all: revert;\n border-bottom: 1px solid var(--gds-ref-pallet-base200, #e9e9e9);\n display: flex;\n gap: 0.25rem;\n justify-content: space-between;\n padding: 1rem;\n }\n }\n}";
1
+ const styles = "@layer base, reset, transitional-styles;\n@layer transitional-styles {\n @layer _base, _overrides;\n :host {\n display: block;\n list-style: none;\n }\n @layer _base {\n .gds-list-heading {\n background-color: var(--gds-sys-color-base-200, #e9e9e9);\n font-size: 0.875rem;\n font-weight: 500;\n padding: 0.5rem 1rem;\n }\n ::slotted([gds-element=gds-list-item]) {\n all: revert;\n border-bottom: 1px solid var(--gds-sys-color-base-200, #e9e9e9);\n display: flex;\n gap: 0.25rem;\n justify-content: space-between;\n padding: 1rem;\n }\n }\n}";
2
2
  export default styles;
package/components/pagination/pagination.component.js CHANGED
@@ -6,6 +6,7 @@ import {
6
6
  } from "../../chunks/chunk.QU3DSPNU.js";
7
7
  var _GdsPagination_instances, pageCount_get, config_get, getVisiblePages_fn, renderPageButton_fn, renderPageButtons_fn, renderJumpFirstButton_fn, renderPreviousButton_fn, renderNextButton_fn, renderJumpLastButton_fn, renderNavigationControls_fn, renderPageSizeOption_fn, renderPageSizeMenu_fn, renderLabel_fn, handlePageChange_fn, handlePageSizeMenuClick_fn, handlePopoverStateChange_fn, handleCustomPageInput_fn;
8
8
  import { localized, msg } from "@lit/localize";
9
+ import { nothing } from "lit";
9
10
  import { property, query, state } from "lit/decorators.js";
10
11
  import { classMap } from "lit/directives/class-map.js";
11
12
  import { when } from "lit/directives/when.js";
@@ -87,6 +88,7 @@ let GdsPagination = class extends withMarginProps(
87
88
  this._isMobile = matches;
88
89
  }
89
90
  render() {
91
+ if (__privateGet(this, _GdsPagination_instances, pageCount_get) <= 1) return nothing;
90
92
  return html`
91
93
  <gds-flex
92
94
  align-items="center"
@@ -96,10 +98,7 @@ let GdsPagination = class extends withMarginProps(
96
98
  >
97
99
  ${__privateMethod(this, _GdsPagination_instances, renderLabel_fn).call(this)}
98
100
  <gds-flex aling-items="center" gap="${__privateGet(this, _GdsPagination_instances, config_get).gap}" flex="1">
99
- ${[
100
- when(__privateGet(this, _GdsPagination_instances, pageCount_get) > 1, () => __privateMethod(this, _GdsPagination_instances, renderNavigationControls_fn).call(this)),
101
- __privateMethod(this, _GdsPagination_instances, renderPageSizeMenu_fn).call(this)
102
- ]}
101
+ ${[__privateMethod(this, _GdsPagination_instances, renderNavigationControls_fn).call(this), __privateMethod(this, _GdsPagination_instances, renderPageSizeMenu_fn).call(this)]}
103
102
  </gds-flex>
104
103
  </gds-flex>
105
104
  `;
@@ -363,7 +362,9 @@ handlePopoverStateChange_fn = function(e) {
363
362
  this._jumpPopoverOpen = e.detail.open;
364
363
  if (e.detail.open) {
365
364
  const popover = e.target;
366
- const input = popover.querySelector("gds-input");
365
+ const input = popover.querySelector(
366
+ '[gds-element="gds-input"]'
367
+ );
367
368
  if (input) {
368
369
  requestAnimationFrame(() => {
369
370
  input.focus();
@@ -373,13 +374,15 @@ handlePopoverStateChange_fn = function(e) {
373
374
  };
374
375
  handleCustomPageInput_fn = function(e) {
375
376
  const input = e.target;
376
- const pageInput = input.closest("gds-input");
377
+ const pageInput = input.closest(
378
+ '[gds-element="gds-input"]'
379
+ );
377
380
  if (pageInput) {
378
381
  const pageNum = parseInt(pageInput.value, 10);
379
382
  if (pageNum && pageNum >= 1 && pageNum <= __privateGet(this, _GdsPagination_instances, pageCount_get)) {
380
383
  __privateMethod(this, _GdsPagination_instances, handlePageChange_fn).call(this, pageNum);
381
- const popover = pageInput.closest("gds-popover");
382
- if (popover) popover.hide();
384
+ const popover = pageInput.closest('[gds-element="gds-popover"]');
385
+ if (popover) popover.open = false;
383
386
  }
384
387
  }
385
388
  };