@sebgroup/green-core 2.16.0 → 2.16.1-rc.20251202112858765
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.
- package/components/button/button.trans.styles.scss.js +1 -1
- package/components/calendar/calendar.trans.styles.scss.js +1 -1
- package/components/context-menu/context-menu.trans.styles.scss.js +1 -1
- package/components/datepicker/datepicker.component.js +1 -9
- package/components/icon/icon.component.d.ts +0 -2
- package/components/icon/icon.js +0 -1
- package/components/input/input.component.js +1 -4
- package/components/segmented-control/segment/segment.styles.js +8 -4
- package/components/textarea/textarea.component.js +1 -4
- package/custom-elements.json +224917 -0
- package/gds-element.js +1 -1
- package/generated/react/index.d.ts +3 -4
- package/generated/react/index.js +3 -4
- package/package.json +7 -3
- package/primitives/field-base/field-base.trans.styles.scss.js +1 -1
- package/primitives/listbox/listbox.trans.styles.scss.js +1 -1
- package/primitives/listbox/option.trans.styles.scss.js +1 -1
- package/utils/helpers/component-meta.d.ts +61 -0
- package/utils/helpers/component-meta.js +248 -0
- package/utils/helpers/component-meta.types.d.ts +62 -0
- package/utils/helpers/component-meta.types.js +0 -0
- package/utils/helpers/custom-element-scoping.d.ts +1 -1
- package/utils/helpers/custom-element-scoping.js +3 -3
- package/utils/mixins/focusable.js +10 -10
- package/generated/react/icons/icon/index.d.ts +0 -388
- package/generated/react/icons/icon/index.js +0 -13
|
@@ -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 min-height: 2.75rem;\n align-items: center;\n display: inline-flex;\n justify-content: center;\n box-sizing: border-box;\n font-size: inherit;\n overflow: hidden;\n display: flex;\n gap: 0.5rem;\n text-decoration: none;\n width: 100%;\n }\n .button:focus:not(:focus-visible) {\n box-shadow: none;\n outline: 0;\n }\n .button:focus, .button:focus-visible {\n outline-color: var(--gds-sys-color-focus-outline);\n outline-style: solid;\n outline-width: 0.125rem;\n outline-offset: 0.125rem;\n }\n @media (max-width: 35.98em) {\n .button {\n min-width: 100%;\n }\n }\n @media screen and (-ms-high-contrast: active) {\n .button {\n border: 2px solid currentcolor;\n }\n }\n .button.small {\n min-height: 2rem;\n padding: 0.4375rem 0.75rem;\n font-size: 0.875rem;\n line-height: 1rem;\n }\n .button.large {\n min-height: 4rem;\n padding: 1rem 1.5rem;\n font-size: 1.5rem;\n line-height: 2rem;\n }\n .button slot:not([name]) {\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n :host(:not([variant=ghost])) .button {\n transition: border 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n background: rgb(0, 122, 199);\n border-color: rgb(0, 122, 199);\n color: #fff;\n --color: #fff;\n }\n :host(:not([variant=ghost])) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n color: rgb(255, 255, 255);\n --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n --color: rgb(255, 255, 255);\n border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n }\n :host(:not([variant=ghost])) .button[aria-selected=true], :host(:not([variant=ghost])) .button:active, :host(:not([variant=ghost])) .button.active, :host(:not([variant=ghost])) .button.active:hover, :host(:not([variant=ghost])) .button:active:hover {\n background-color: rgb(0, 122, 199);\n color: rgb(255, 255, 255);\n --background: rgb(0, 122, 199);\n --color: rgb(255, 255, 255);\n border-color: rgb(0, 122, 199);\n }\n :host(:not([variant=ghost])) .button:focus-visible {\n background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n color: rgb(255, 255, 255);\n --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n --color: rgb(255, 255, 255);\n border-color: rgb(25.4035777564, 154.8940067842, 227.221994169) !important;\n }\n :host(:not([variant=ghost])) .button:disabled, :host(:not([variant=ghost])) .button.disabled, :host(:not([variant=ghost])) .button[aria-disabled=true] {\n background: var(--form-control-primary-bg-disabled) !important;\n color: var(--text-primary-disabled-color) !important;\n border-color: var(--border-primary-disabled-color) !important;\n cursor: not-allowed;\n }\n :host(:not([variant=ghost])) .button:disabled::-moz-placeholder, :host(:not([variant=ghost])) .button.disabled::-moz-placeholder, :host(:not([variant=ghost])) .button[aria-disabled=true]::-moz-placeholder {\n color: var(--text-disabled-color);\n }\n :host(:not([variant=ghost])) .button:disabled::placeholder, :host(:not([variant=ghost])) .button.disabled::placeholder, :host(:not([variant=ghost])) .button[aria-disabled=true]::placeholder {\n color: var(--text-disabled-color);\n }\n :host([rank*=secondary]) .button {\n transition: border 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n background: transparent;\n border-color: rgb(0, 122, 199);\n color: rgb(0, 122, 199);\n --color: rgb(0, 122, 199);\n }\n :host([rank*=secondary]) .button:focus:not(:focus-visible) {\n box-shadow: none;\n outline: 0;\n }\n :host([rank*=secondary]) .button:focus, :host([rank*=secondary]) .button:focus-visible {\n outline-color: var(--gds-sys-color-focus-outline);\n outline-style: solid;\n outline-width: 0.125rem;\n outline-offset: 0.125rem;\n }\n :host([rank*=secondary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n color: rgb(255, 255, 255);\n --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n --color: rgb(255, 255, 255);\n border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n }\n :host([rank*=secondary]) .button[aria-selected=true], :host([rank*=secondary]) .button:active, :host([rank*=secondary]) .button.active, :host([rank*=secondary]) .button.active:hover, :host([rank*=secondary]) .button:active:hover {\n background-color: rgb(0, 122, 199);\n color: rgb(255, 255, 255);\n --background: rgb(0, 122, 199);\n --color: rgb(255, 255, 255);\n border-color: rgb(0, 122, 199);\n }\n :host([rank*=secondary]) .button:disabled, :host([rank*=secondary]) .button.disabled, :host([rank*=secondary]) .button[aria-disabled=true] {\n background: var(--sg-form-control-bg-disabled) !important;\n color: var(--text-disabled-color) !important;\n border-color: var(--border-disabled-color) !important;\n cursor: not-allowed;\n }\n :host([rank*=secondary]) .button:disabled::-moz-placeholder, :host([rank*=secondary]) .button.disabled::-moz-placeholder, :host([rank*=secondary]) .button[aria-disabled=true]::-moz-placeholder {\n color: var(--text-disabled-color);\n }\n :host([rank*=secondary]) .button:disabled::placeholder, :host([rank*=secondary]) .button.disabled::placeholder, :host([rank*=secondary]) .button[aria-disabled=true]::placeholder {\n color: var(--text-disabled-color);\n }\n :host([rank*=tertiary]) .button {\n transition: border 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n background: transparent;\n border-color: transparent;\n color: rgb(0, 122, 199);\n --color: rgb(0, 122, 199);\n }\n :host([rank*=tertiary]) .button:focus:not(:focus-visible) {\n box-shadow: none;\n outline: 0;\n }\n :host([rank*=tertiary]) .button:focus, :host([rank*=tertiary]) .button:focus-visible {\n outline-color: var(--gds-sys-color-focus-outline);\n outline-style: solid;\n outline-width: 0.125rem;\n outline-offset: 0.125rem;\n }\n :host([rank*=tertiary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n color: rgb(255, 255, 255);\n --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n --color: rgb(255, 255, 255);\n border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n }\n :host([rank*=tertiary]) .button[aria-selected=true], :host([rank*=tertiary]) .button:active, :host([rank*=tertiary]) .button.active, :host([rank*=tertiary]) .button.active:hover, :host([rank*=tertiary]) .button:active:hover {\n background-color: rgb(0, 122, 199);\n color: rgb(255, 255, 255);\n --background: rgb(0, 122, 199);\n --color: rgb(255, 255, 255);\n border-color: rgb(0, 122, 199);\n }\n :host([rank*=tertiary]) .button:disabled, :host([rank*=tertiary]) .button.disabled, :host([rank*=tertiary]) .button[aria-disabled=true] {\n background: var(--sg-form-control-bg-disabled) !important;\n color: var(--text-disabled-color) !important;\n border-color: var(--border-disabled-color) !important;\n cursor: not-allowed;\n }\n :host([rank*=tertiary]) .button:disabled::-moz-placeholder, :host([rank*=tertiary]) .button.disabled::-moz-placeholder, :host([rank*=tertiary]) .button[aria-disabled=true]::-moz-placeholder {\n color: var(--text-disabled-color);\n }\n :host([rank*=tertiary]) .button:disabled::placeholder, :host([rank*=tertiary]) .button.disabled::placeholder, :host([rank*=tertiary]) .button[aria-disabled=true]::placeholder {\n color: var(--text-disabled-color);\n }\n /* stylelint-disable */\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button,\n :host([variant=negative][rank=primary]) .button {\n background: rgb(187, 0, 12);\n border-color: rgb(187, 0, 12);\n color: #fff;\n --color: #fff;\n transition: border 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n }\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:not(:disabled, .disabled, [aria-disabled]):hover,\n :host([variant=negative][rank=primary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n background-color: rgb(216, 26, 26);\n color: rgb(255, 255, 255);\n --background: rgb(216, 26, 26);\n --color: rgb(255, 255, 255);\n border-color: rgb(216, 26, 26);\n }\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-selected=true], :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active:hover,\n :host([variant=negative][rank=primary]) .button[aria-selected=true],\n :host([variant=negative][rank=primary]) .button:active,\n :host([variant=negative][rank=primary]) .button.active,\n :host([variant=negative][rank=primary]) .button.active:hover,\n :host([variant=negative][rank=primary]) .button:active:hover {\n background-color: rgb(187, 0, 12);\n color: rgb(255, 255, 255);\n --background: rgb(187, 0, 12);\n --color: rgb(255, 255, 255);\n border-color: rgb(187, 0, 12);\n }\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-selected]:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active:hover,\n :host([variant=negative][rank=primary]) .button[aria-selected]:hover,\n :host([variant=negative][rank=primary]) .button.active:hover,\n :host([variant=negative][rank=primary]) .button:active:hover {\n opacity: 0.9;\n }\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus:not(:focus-visible),\n :host([variant=negative][rank=primary]) .button:focus:not(:focus-visible) {\n box-shadow: none;\n outline: 0;\n }\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus-visible,\n :host([variant=negative][rank=primary]) .button:focus,\n :host([variant=negative][rank=primary]) .button:focus-visible {\n outline-color: var(--gds-sys-color-focus-outline);\n outline-style: solid;\n outline-width: 0.125rem;\n outline-offset: 0.125rem;\n }\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true],\n :host([variant=negative][rank=primary]) .button:disabled,\n :host([variant=negative][rank=primary]) .button.disabled,\n :host([variant=negative][rank=primary]) .button[aria-disabled=true] {\n background: var(--form-control-primary-bg-disabled) !important;\n color: var(--text-primary-disabled-color) !important;\n border-color: var(--border-primary-disabled-color) !important;\n cursor: not-allowed;\n }\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled::-moz-placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled::-moz-placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true]::-moz-placeholder, :host([variant=negative][rank=primary]) .button:disabled::-moz-placeholder, :host([variant=negative][rank=primary]) .button.disabled::-moz-placeholder, :host([variant=negative][rank=primary]) .button[aria-disabled=true]::-moz-placeholder {\n color: var(--text-disabled-color);\n }\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled::placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled::placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true]::placeholder,\n :host([variant=negative][rank=primary]) .button:disabled::placeholder,\n :host([variant=negative][rank=primary]) .button.disabled::placeholder,\n :host([variant=negative][rank=primary]) .button[aria-disabled=true]::placeholder {\n color: var(--text-disabled-color);\n }\n /* stylelint-enable */\n :host([variant=negative][rank=secondary]) .button,\n :host([variant=negative][rank=tertiary]) .button {\n color: rgb(187, 0, 12);\n --color: rgb(187, 0, 12);\n border-color: transparent;\n transition: border 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n }\n :host([variant=negative][rank=secondary]) .button:not(:disabled, .disabled, [aria-disabled]):hover,\n :host([variant=negative][rank=tertiary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n background-color: rgb(216, 26, 26);\n color: rgb(255, 255, 255);\n --background: rgb(216, 26, 26);\n --color: rgb(255, 255, 255);\n border-color: rgb(216, 26, 26);\n }\n :host([variant=negative][rank=secondary]) .button[aria-selected=true], :host([variant=negative][rank=secondary]) .button:active, :host([variant=negative][rank=secondary]) .button.active, :host([variant=negative][rank=secondary]) .button.active:hover, :host([variant=negative][rank=secondary]) .button:active:hover,\n :host([variant=negative][rank=tertiary]) .button[aria-selected=true],\n :host([variant=negative][rank=tertiary]) .button:active,\n :host([variant=negative][rank=tertiary]) .button.active,\n :host([variant=negative][rank=tertiary]) .button.active:hover,\n :host([variant=negative][rank=tertiary]) .button:active:hover {\n background-color: rgb(187, 0, 12);\n color: rgb(255, 255, 255);\n --background: rgb(187, 0, 12);\n --color: rgb(255, 255, 255);\n border-color: rgb(187, 0, 12);\n }\n :host([variant=negative][rank=secondary]) .button[aria-selected]:hover, :host([variant=negative][rank=secondary]) .button.active:hover, :host([variant=negative][rank=secondary]) .button:active:hover,\n :host([variant=negative][rank=tertiary]) .button[aria-selected]:hover,\n :host([variant=negative][rank=tertiary]) .button.active:hover,\n :host([variant=negative][rank=tertiary]) .button:active:hover {\n opacity: 0.9;\n }\n :host([variant=negative][rank=secondary]) .button:focus:not(:focus-visible),\n :host([variant=negative][rank=tertiary]) .button:focus:not(:focus-visible) {\n box-shadow: none;\n outline: 0;\n }\n :host([variant=negative][rank=secondary]) .button:focus, :host([variant=negative][rank=secondary]) .button:focus-visible,\n :host([variant=negative][rank=tertiary]) .button:focus,\n :host([variant=negative][rank=tertiary]) .button:focus-visible {\n outline-color: var(--gds-sys-color-focus-outline);\n outline-style: solid;\n outline-width: 0.125rem;\n outline-offset: 0.125rem;\n }\n :host([variant=negative][rank=secondary]) .button {\n border-color: rgb(187, 0, 12);\n }\n :host([variant=ghost]) .button {\n transition: border 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n border-color: rgb(51, 51, 51);\n color: rgb(51, 51, 51);\n --color: rgb(51, 51, 51);\n }\n :host([variant=ghost]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n background-color: rgb(51, 51, 51);\n color: rgb(255, 255, 255);\n --background: rgb(51, 51, 51);\n --color: rgb(255, 255, 255);\n border-color: rgb(51, 51, 51);\n }\n :host([variant=ghost]) .button[aria-selected=true], :host([variant=ghost]) .button:active, :host([variant=ghost]) .button.active, :host([variant=ghost]) .button.active:hover, :host([variant=ghost]) .button:active:hover {\n background-color: rgb(51, 51, 51);\n color: rgb(255, 255, 255);\n --background: rgb(51, 51, 51);\n --color: rgb(255, 255, 255);\n border-color: rgb(51, 51, 51);\n }\n :host([variant=ghost]) .button[aria-selected]:hover, :host([variant=ghost]) .button.active:hover, :host([variant=ghost]) .button:active:hover {\n opacity: 0.9;\n }\n :host([variant=ghost]) .button:focus-visible {\n background-color: rgb(51, 51, 51);\n color: rgb(255, 255, 255);\n --background: rgb(51, 51, 51);\n --color: rgb(255, 255, 255);\n border-color: rgb(51, 51, 51) !important;\n }\n :host([variant=ghost]) .button:disabled, :host([variant=ghost]) .button.disabled, :host([variant=ghost]) .button[aria-disabled=true] {\n color: var(--text-disabled-color) !important;\n border-color: var(--border-disabled-color) !important;\n cursor: not-allowed;\n }\n :host([variant=ghost]) .button:disabled::-moz-placeholder, :host([variant=ghost]) .button.disabled::-moz-placeholder, :host([variant=ghost]) .button[aria-disabled=true]::-moz-placeholder {\n color: var(--text-disabled-color);\n }\n :host([variant=ghost]) .button:disabled::placeholder, :host([variant=ghost]) .button.disabled::placeholder, :host([variant=ghost]) .button[aria-disabled=true]::placeholder {\n color: var(--text-disabled-color);\n }\n }\n @layer _overrides {\n :host .button.icon {\n padding: 0.75rem;\n background: transparent;\n border-width: 0px;\n color: currentColor;\n }\n :host .button.icon:hover {\n color: currentColor;\n background: var(--grey-500);\n }\n :host .button.icon slot {\n display: contents;\n }\n .button.icon.xs {\n min-height: 1.5rem;\n line-height: 0.75rem;\n padding: 0.25rem;\n }\n .button.icon.small {\n padding: 0.5rem;\n }\n .button.icon.large {\n padding: 1rem;\n }\n }\n}";
|
|
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}";
|
|
2
2
|
export default styles;
|
|
@@ -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
|
|
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}";
|
|
2
2
|
export default styles;
|
|
@@ -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 min-height: 2.75rem;\n align-items: center;\n display: inline-flex;\n justify-content: center;\n background-color: transparent;\n border: 0.0625rem solid transparent;\n padding: 0.625rem;\n height: 2.75rem;\n width: 2.75rem;\n min-width: auto;\n --color: var(--gds-sys-color-base-800);\n }\n button:focus:not(:focus-visible) {\n box-shadow: none;\n outline: 0;\n }\n button:focus, button:focus-visible {\n outline-color: var(--gds-sys-color-focus-outline);\n outline-style: solid;\n outline-width: 0.125rem;\n outline-offset: 0.125rem;\n }\n @media (max-width: 35.98em) {\n button {\n min-width: 100%;\n }\n }\n @media screen and (-ms-high-contrast: active) {\n button {\n border: 2px solid currentcolor;\n }\n }\n button.small {\n min-height: 2rem;\n padding: 0.4375rem 0.75rem;\n font-size: 0.875rem;\n line-height: 1rem;\n }\n button.large {\n min-height: 4rem;\n padding: 1rem 1.5rem;\n font-size: 1.5rem;\n line-height: 2rem;\n }\n .form-group button {\n margin-top: -0.625rem;\n }\n button.small {\n height: 2rem;\n width: 2rem;\n padding: 0.4375rem;\n line-height: 1.125rem;\n }\n button svg {\n height: 1rem;\n width: 1rem;\n }\n button path,\n button line,\n button circle,\n button rect,\n button ellipse,\n button polyline,\n button text {\n fill: var(--gds-sys-color-base-800);\n stroke: var(--gds-sys-color-base-800);\n transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);\n }\n button:hover, button.highlighted {\n background-color: rgba(0, 0, 0, 0.1);\n border-color: transparent;\n }\n button:active, button.highlighted:hover {\n background-color: rgba(0, 0, 0, 0.2);\n border-color: transparent;\n }\n }\n @layer _overrides {\n button {\n border-color: transparent;\n color: var(--gds-ref-pallet-base800);\n display: flex;\n gap: 0.5rem;\n line-height: 0.75;\n padding-inline: 0.4375rem;\n width: auto;\n }\n button.highlighted {\n background-color: var(--gds-ref-pallet-base300);\n }\n }\n}";
|
|
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}";
|
|
2
2
|
export default styles;
|
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
__privateMethod,
|
|
6
6
|
__privateSet
|
|
7
7
|
} from "../../chunks/chunk.QU3DSPNU.js";
|
|
8
|
-
var _utcHours, _valueOnOpen, _Datepicker_instances, shouldShowFooter_fn, renderBackToValidRangeButton_fn, focusDate_fn, getSpinnerLabel_fn, getMinSpinnerValue_fn, getMaxSpinnerValue_fn, dispatchChangeEvent_fn, dispatchInputEvent_fn,
|
|
8
|
+
var _utcHours, _valueOnOpen, _Datepicker_instances, shouldShowFooter_fn, renderBackToValidRangeButton_fn, focusDate_fn, getSpinnerLabel_fn, getMinSpinnerValue_fn, getMaxSpinnerValue_fn, dispatchChangeEvent_fn, dispatchInputEvent_fn, _handleSpinnerFocus, _handleClipboardCopy, _handleClipboardPaste, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleCalendarFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, years_get, isValueOutsideRange_get;
|
|
9
9
|
import { localized, msg } from "@lit/localize";
|
|
10
10
|
import { nothing } from "lit";
|
|
11
11
|
import { property, query, queryAll, queryAsync, state } from "lit/decorators.js";
|
|
@@ -62,13 +62,6 @@ let Datepicker = class extends GdsFormControlElement {
|
|
|
62
62
|
this._focusedYear = (/* @__PURE__ */ new Date()).getFullYear();
|
|
63
63
|
this._dateFormatLayout = __privateMethod(this, _Datepicker_instances, parseDateFormat_fn).call(this, "y-m-d");
|
|
64
64
|
__privateAdd(this, _valueOnOpen);
|
|
65
|
-
__privateAdd(this, _handleFieldFocusOut, (e) => {
|
|
66
|
-
this._elTrigger.then((_) => {
|
|
67
|
-
const parent = e.relatedTarget?.parentElement;
|
|
68
|
-
if (parent === e.target) return;
|
|
69
|
-
document.getSelection()?.removeAllRanges();
|
|
70
|
-
});
|
|
71
|
-
});
|
|
72
65
|
__privateAdd(this, _handleSpinnerFocus, (e) => {
|
|
73
66
|
this._elTrigger.then((field) => {
|
|
74
67
|
document.getSelection()?.removeAllRanges();
|
|
@@ -620,7 +613,6 @@ dispatchInputEvent_fn = function() {
|
|
|
620
613
|
})
|
|
621
614
|
);
|
|
622
615
|
};
|
|
623
|
-
_handleFieldFocusOut = new WeakMap();
|
|
624
616
|
_handleSpinnerFocus = new WeakMap();
|
|
625
617
|
_handleClipboardCopy = new WeakMap();
|
|
626
618
|
_handleClipboardPaste = new WeakMap();
|
|
@@ -2,8 +2,6 @@ import { GdsElement } from '../../gds-element';
|
|
|
2
2
|
import { GdsColorLevel } from '../../utils/helpers';
|
|
3
3
|
declare const GdsIcon_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").MarginProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").LayoutChildProps) & typeof GdsElement;
|
|
4
4
|
/**
|
|
5
|
-
* @element gds-icon
|
|
6
|
-
*
|
|
7
5
|
* @part icon - The icon SVG element.
|
|
8
6
|
*/
|
|
9
7
|
export declare class GdsIcon extends GdsIcon_base {
|
package/components/icon/icon.js
CHANGED
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
__privateMethod,
|
|
6
6
|
__privateSet
|
|
7
7
|
} from "../../chunks/chunk.QU3DSPNU.js";
|
|
8
|
-
var _charCounterComputed, _Input_instances, shouldShowFooter_fn, _handleOnInput, _handleOnChange, _handleFieldClick, _handleClearBtnClick, renderFieldContents_fn, renderSlotLead_fn, renderSlotTrail_fn, renderNativeInput_fn, renderClearButton_fn
|
|
8
|
+
var _charCounterComputed, _Input_instances, shouldShowFooter_fn, _handleOnInput, _handleOnChange, _handleFieldClick, _handleClearBtnClick, renderFieldContents_fn, renderSlotLead_fn, renderSlotTrail_fn, renderNativeInput_fn, renderClearButton_fn;
|
|
9
9
|
import { localized, msg } from "@lit/localize";
|
|
10
10
|
import { property, query, queryAsync } from "lit/decorators.js";
|
|
11
11
|
import { ifDefined } from "lit/directives/if-defined.js";
|
|
@@ -203,9 +203,6 @@ renderClearButton_fn = function() {
|
|
|
203
203
|
</gds-button>`;
|
|
204
204
|
else return nothing;
|
|
205
205
|
};
|
|
206
|
-
shouldShowRemainingChars_get = function() {
|
|
207
|
-
return __privateGet(this, _charCounterComputed)[1] !== false;
|
|
208
|
-
};
|
|
209
206
|
Input.styles = [tokens, formControlHostStyles, InputStyles];
|
|
210
207
|
__decorateClass([
|
|
211
208
|
property({ attribute: "supporting-text" })
|
|
@@ -12,7 +12,7 @@ const style = css`
|
|
|
12
12
|
background: transparent;
|
|
13
13
|
border-radius: var(--gds-sys-radius-max);
|
|
14
14
|
border-width: 0;
|
|
15
|
-
color: var(--gds-sys-color-content-neutral-
|
|
15
|
+
color: var(--gds-sys-color-content-neutral-02);
|
|
16
16
|
cursor: pointer;
|
|
17
17
|
flex-grow: 1;
|
|
18
18
|
flex-shrink: 0;
|
|
@@ -26,9 +26,9 @@ const style = css`
|
|
|
26
26
|
white-space: nowrap;
|
|
27
27
|
width: 100%;
|
|
28
28
|
transition:
|
|
29
|
-
background-color var(--gds-sys-motion-fast),
|
|
30
|
-
border-color var(--gds-sys-motion-fast),
|
|
31
|
-
color var(--gds-sys-motion-fast);
|
|
29
|
+
background-color var(--gds-sys-motion-duration-fast),
|
|
30
|
+
border-color var(--gds-sys-motion-duration-fast),
|
|
31
|
+
color var(--gds-sys-motion-duration-fast);
|
|
32
32
|
outline-width: var(--gds-sys-space-4xs);
|
|
33
33
|
outline-style: solid;
|
|
34
34
|
outline-offset: -2px;
|
|
@@ -40,6 +40,10 @@ const style = css`
|
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
+
:host([selected]) button {
|
|
44
|
+
color: var(--gds-sys-color-content-neutral-01);
|
|
45
|
+
}
|
|
46
|
+
|
|
43
47
|
@media (pointer: fine) {
|
|
44
48
|
:host(:not([selected])) button:hover {
|
|
45
49
|
background-color: color-mix(
|
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
__privateMethod,
|
|
6
6
|
__privateSet
|
|
7
7
|
} from "../../chunks/chunk.QU3DSPNU.js";
|
|
8
|
-
var _charCounterComputed, _Textarea_instances, shouldShowFooter_fn, _handleOnInput, _handleOnChange, _handleOnPaste, _handleFieldClick, _handleClearBtnClick, renderFieldContents_fn, renderSlotLead_fn, renderSlotTrail_fn, renderNativeTextarea_fn, renderClearButton_fn
|
|
8
|
+
var _charCounterComputed, _Textarea_instances, shouldShowFooter_fn, _handleOnInput, _handleOnChange, _handleOnPaste, _handleFieldClick, _handleClearBtnClick, renderFieldContents_fn, renderSlotLead_fn, renderSlotTrail_fn, renderNativeTextarea_fn, renderClearButton_fn;
|
|
9
9
|
import { localized, msg } from "@lit/localize";
|
|
10
10
|
import { property, query, queryAsync } from "lit/decorators.js";
|
|
11
11
|
import { ifDefined } from "lit/directives/if-defined.js";
|
|
@@ -302,9 +302,6 @@ renderClearButton_fn = function() {
|
|
|
302
302
|
`;
|
|
303
303
|
else return nothing;
|
|
304
304
|
};
|
|
305
|
-
shouldShowRemainingChars_get = function() {
|
|
306
|
-
return __privateGet(this, _charCounterComputed)[1] !== false;
|
|
307
|
-
};
|
|
308
305
|
Textarea.styles = [tokens, formControlHostStyle, TextareaStyles];
|
|
309
306
|
__decorateClass([
|
|
310
307
|
styleExpressionProperty({
|