npm - @pega/cosmos-react-core - Versions diffs - 10.0.0-build.1.0 → 10.0.0-build.1.2 - Mend

@pega/cosmos-react-core 10.0.0-build.1.0 → 10.0.0-build.1.2

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 (42) hide show

package/lib/components/Location/LocationView.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LocationView.styles.js","sourceRoot":"","sources":["../../../src/components/Location/LocationView.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;;;CAKhD,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAsB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IACvF,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtF,OAAO,GAAG,CAAA;;cAEE,OAAO;;;qBAGA,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;mBAK7B,QAAQ,CAAC,CAAC;qBACR,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;;;;;;;;;qBAStC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC;uBACvB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;0BAC3B,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU;;UAEhD,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;0BAElE,KAAK,CAAC,IAAI,CAAC,OAAO;;;;wBAIpB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ;;;;;;;iBAOrC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;kBAClC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;kBACnC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC;;YAE7C,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,eAAe,CAAC;;;;;;;;;;;;;;;;wBAgB7D,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC;;;;mBAI5C,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;oBACnC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;;;;0BAO9B,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC;;;;;;;;;;0BAUvC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC;;;;;;;;GAQ9D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAIjC,CAAC,EACC,QAAQ,EACR,MAAM,EACN,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,EAC9C,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;QAIN,QAAQ;QACV,GAAG,CAAA;mBACU,eAAe;OAC3B;;QAEC,MAAM,KAAK,OAAO;QACpB,GAAG,CAAA;mBACU,eAAe;OAC3B;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport { Status } from '../Badges';\n\nexport const StyledLocationError = styled(Status)`\n position: absolute;\n top: 40%;\n left: 50%;\n transform: translate(-50%, -50%);\n`;\n\nStyledLocationError.defaultProps = defaultThemeProp;\n\nexport const StyledLocationView = styled.div<{ $height: string }>(({ $height, theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n min-height: inherit;\n height: ${$height};\n position: relative;\n flex: auto;\n border-radius: ${theme.base['border-radius']};\n mask-image: radial-gradient(white, black);\n -webkit-mask-image: radial-gradient(white, black);\n\n div.gm-style-iw.gm-style-iw-c .gm-style-iw-chr {\n font-size: ${fontSize.s};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n }\n\n div.gm-style-iw.gm-style-iw-c div.gm-style-iw-d {\n overflow: auto !important;\n }\n\n div.gm-style-iw.gm-style-iw-c {\n display: flex;\n font-family: ${theme.base['font-family']};\n min-width: min(${theme.base['content-width'].sm}, calc(100vw - 2rem)) !important;\n background-color: ${theme.components.card.background};\n border-radius: calc(\n ${theme.components['form-control']['border-radius']} * ${theme.base['border-radius']}\n );\n padding: calc(2 * ${theme.base.spacing}) !important;\n > button {\n opacity: 1;\n position: relative !important;\n z-index: calc(${theme.base['z-index'].backdrop} + 1);\n top: 0 !important;\n right: 0 !important;\n align-self: end;\n display: inline-flex !important;\n align-items: center;\n justify-content: center;\n width: ${theme.base['hit-area']['mouse-min']} !important;\n height: ${theme.base['hit-area']['mouse-min']} !important;\n border: ${theme.components.button['border-width']} solid transparent !important;\n border-radius: calc(\n ${theme.base['border-radius']} * ${theme.components.button['border-radius']}\n );\n color: currentColor;\n\n > span {\n margin: 0 !important;\n height: 1.25rem !important;\n width: 1.25rem !important;\n }\n\n &:active {\n translate: 0 0.0625rem;\n }\n\n &:enabled:focus,\n &:not([disabled]):focus {\n box-shadow: ${theme.components.button['focus-shadow']};\n }\n\n @media (pointer: coarse) {\n width: ${theme.base['hit-area']['finger-min']} !important;\n height: ${theme.base['hit-area']['finger-min']} !important;\n }\n\n @media (hover: hover) {\n &:hover::before {\n content: '';\n position: absolute;\n inset: calc(${theme.components.button['border-width']} * -1);\n border-radius: inherit;\n background-color: currentColor;\n color: currentColor;\n opacity: 0.1;\n }\n\n &:active::before {\n content: '';\n position: absolute;\n inset: calc(${theme.components.button['border-width']} * -1);\n border-radius: inherit;\n background-color: currentColor;\n opacity: 0.2;\n }\n }\n }\n }\n `;\n});\n\nStyledLocationView.defaultProps = defaultThemeProp;\n\nexport const StyledMap = styled.div<{\n status: string;\n disabled: boolean;\n}>(\n ({\n disabled,\n status,\n theme: {\n base: { 'disabled-opacity': disabledOpacity }\n }\n }) => {\n return css`\n position: absolute;\n inset: 0;\n\n ${disabled &&\n css`\n opacity: ${disabledOpacity};\n `}\n\n ${status === 'error' &&\n css`\n opacity: ${disabledOpacity};\n `}\n `;\n }\n);\n\nStyledMap.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"LocationView.styles.js","sourceRoot":"","sources":["../../../src/components/Location/LocationView.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAEnC,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;;;;;CAKhD,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAsB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE;IACvF,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IACtF,OAAO,GAAG,CAAA;;cAEE,OAAO;;;qBAGA,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;mBAK7B,QAAQ,CAAC,CAAC;qBACR,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;;;;;;;;;qBAStC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC;uBACvB,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;0BAC3B,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU;;UAEhD,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;0BAElE,KAAK,CAAC,IAAI,CAAC,OAAO;;;;wBAIpB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,QAAQ;;;;;;;iBAOrC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;kBAClC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC;kBACnC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC;;YAE7C,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,eAAe,CAAC;;;;;;;;;;;;;;;;wBAgB7D,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC;;;;mBAI5C,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;oBACnC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;;;;;0BAO9B,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC;;;;;;;;;;0BAUvC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC;;;;;;;;GAQ9D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAIjC,CAAC,EACC,QAAQ,EACR,MAAM,EACN,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,EAC9C,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;QAIN,QAAQ;QACV,GAAG,CAAA;mBACU,eAAe;OAC3B;;QAEC,MAAM,KAAK,OAAO;QACpB,GAAG,CAAA;mBACU,eAAe;OAC3B;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { calculateFontSize } from '../../styles';\nimport { Status } from '../Badges';\n\nexport const StyledLocationError = styled(Status)`\n position: absolute;\n top: 40%;\n left: 50%;\n transform: translate(-50%, -50%);\n`;\n\nStyledLocationError.defaultProps = defaultThemeProp;\n\nexport const StyledLocationView = styled.div<{ $height: string }>(({ $height, theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n min-height: inherit;\n height: ${$height};\n position: relative;\n flex: auto;\n border-radius: ${theme.base['border-radius']};\n mask-image: radial-gradient(white, black);\n -webkit-mask-image: radial-gradient(white, black);\n\n div.gm-style-iw.gm-style-iw-c .gm-style-iw-chr {\n font-size: ${fontSize.s};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n }\n\n div.gm-style-iw.gm-style-iw-c div.gm-style-iw-d {\n overflow: auto !important;\n }\n\n div.gm-style-iw.gm-style-iw-c {\n display: flex;\n font-family: ${theme.base['font-family']};\n min-width: min(${theme.base['content-width'].sm}, calc(100vw - 2rem)) !important;\n background-color: ${theme.components.card.background};\n border-radius: calc(\n ${theme.components['form-control']['border-radius']} * ${theme.base['border-radius']}\n );\n padding: calc(2 * ${theme.base.spacing}) !important;\n > button {\n opacity: 1;\n position: relative !important;\n z-index: calc(${theme.base['z-index'].backdrop} + 1);\n top: 0 !important;\n right: 0 !important;\n align-self: end;\n display: inline-flex !important;\n align-items: center;\n justify-content: center;\n width: ${theme.base['hit-area']['mouse-min']} !important;\n height: ${theme.base['hit-area']['mouse-min']} !important;\n border: ${theme.components.button['border-width']} solid transparent !important;\n border-radius: calc(\n ${theme.base['border-radius']} * ${theme.components.button['border-radius']}\n );\n color: currentColor;\n\n > span {\n margin: 0 !important;\n height: 1.25rem !important;\n width: 1.25rem !important;\n }\n\n &:active {\n translate: 0 0.0625rem;\n }\n\n &:enabled:focus-visible,\n &:not([disabled]):focus-visible {\n box-shadow: ${theme.components.button['focus-shadow']};\n }\n\n @media (pointer: coarse) {\n width: ${theme.base['hit-area']['finger-min']} !important;\n height: ${theme.base['hit-area']['finger-min']} !important;\n }\n\n @media (hover: hover) {\n &:hover::before {\n content: '';\n position: absolute;\n inset: calc(${theme.components.button['border-width']} * -1);\n border-radius: inherit;\n background-color: currentColor;\n color: currentColor;\n opacity: 0.1;\n }\n\n &:active::before {\n content: '';\n position: absolute;\n inset: calc(${theme.components.button['border-width']} * -1);\n border-radius: inherit;\n background-color: currentColor;\n opacity: 0.2;\n }\n }\n }\n }\n `;\n});\n\nStyledLocationView.defaultProps = defaultThemeProp;\n\nexport const StyledMap = styled.div<{\n status: string;\n disabled: boolean;\n}>(\n ({\n disabled,\n status,\n theme: {\n base: { 'disabled-opacity': disabledOpacity }\n }\n }) => {\n return css`\n position: absolute;\n inset: 0;\n\n ${disabled &&\n css`\n opacity: ${disabledOpacity};\n `}\n\n ${status === 'error' &&\n css`\n opacity: ${disabledOpacity};\n `}\n `;\n }\n);\n\nStyledMap.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Menu/Menu.styles.js CHANGED Viewed

@@ -193,7 +193,7 @@ export const StyledMenuItem = styled.li(({ theme: { base, components }, isParent
         !selectableParent &&
         (mode === 'multi-select' || mode === 'single-select') &&
         css `
-        padding-inline-start: calc(1.125rem + ${base.spacing});
+        padding-inline-start: calc(1.125rem + 2 * ${base.spacing});
       `}
       ${StyledGrid} {
@@ -384,7 +384,7 @@ export const StyledMenu = styled.div(({ theme }) => {
       max-height: inherit;
     }
-    &:focus {
+    &:focus-visible {
       box-shadow: ${theme.base.shadow.focus};
       outline: none;
     }
@@ -471,7 +471,7 @@ export const StyledMenuFilter = styled.div(({ theme }) => {
         -webkit-appearance: none;
       }
-      &:focus:not([disabled]) {
+      &:focus-visible:not([disabled]) {
         box-shadow: ${theme.base.shadow['focus-inset']};
         border-color: ${theme.components['form-control']['border-color']};

package/lib/components/Menu/Menu.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Menu.styles.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { hideVisually, mix, transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledEmptyState } from '../EmptyState';\nimport Icon, { StyledIcon } from '../Icon';\nimport { StyledGrid } from '../Grid';\nimport { tryCatch } from '../../utils';\nimport { StyledText } from '../Text';\nimport { StyledVisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText';\nimport { StyledMetaList, StyledMetaListItem } from '../MetaList/MetaList';\nimport Button, { StyledButton } from '../Button';\nimport { readableColor } from '../../styles';\nimport {\n StyledPrimary,\n StyledSecondary,\n StyledSummaryItem,\n StyledSummaryItemActions,\n StyledVisual\n} from '../SummaryItem';\nimport { ellipsisOverflow } from '../../styles/mixins';\nimport { StyledFlex } from '../Flex';\nimport { StyledFormControl } from '../FormControl';\n\nimport type { MenuProps } from './Menu.types';\n\nexport const StyledExpandButton = styled(Button)`\n align-self: center;\n`;\n\nexport const StyledCheckMarkIcon = styled(Icon)``;\n\nexport const StyledMenuItem = styled.li<{\n isParentItem: boolean;\n mode?: MenuProps['mode'];\n itemLayout?: MenuProps['itemLayout'];\n isChecked?: boolean;\n selectableParent?: boolean;\n}>(\n ({\n theme: { base, components },\n isParentItem,\n itemLayout,\n mode = 'action',\n isChecked = false,\n selectableParent = false\n }) => {\n const activeColor = tryCatch(() =>\n mix(0.85, base.palette['primary-background'], base.palette.interactive)\n );\n const hoverColor = tryCatch(() =>\n mix(0.95, base.palette['primary-background'], base.palette.interactive)\n );\n\n const checkedBackground = components['radio-check'][':checked']['background-color'];\n const checkedForeground = tryCatch(() => readableColor(checkedBackground));\n\n return css`\n min-height: ${base['hit-area']['mouse-min']};\n padding-block: calc(0.75 * ${base.spacing});\n padding-inline: ${base.spacing};\n cursor: pointer;\n\n > ${StyledSummaryItem} {\n ${StyledSummaryItemActions}, ${StyledVisual} {\n display: grid;\n align-items: center;\n }\n\n > ${StyledVisual}:has(> :nth-child(2)) {\n grid-template-columns: auto auto;\n grid-column-gap: ${base.spacing};\n }\n\n ${itemLayout === 'stacked' &&\n css`\n &:has(${StyledSecondary})\n > ${StyledVisual},\n &:has(${StyledSecondary})\n > ${StyledSummaryItemActions} {\n height: ${base['hit-area']['mouse-min']};\n align-self: start;\n }\n `}\n }\n\n ${itemLayout === 'inline' &&\n css`\n justify-content: flex-start;\n\n ${StyledSummaryItem} {\n /* Sets grid columns based on SummaryItem content combinations /\n\n &:has(${StyledVisual}):has(${StyledSecondary}):has(${StyledSummaryItemActions}) {\n grid-template-areas: 'visual primary secondary actions';\n grid-template-columns: auto auto 1fr auto;\n }\n\n &:has(${StyledVisual}):has(${StyledSecondary}):not(:has(${StyledSummaryItemActions})) {\n grid-template-areas: 'visual primary secondary';\n grid-template-columns: auto auto 1fr;\n }\n\n &:has(${StyledVisual}):not(:has(${StyledSecondary})):has(${StyledSummaryItemActions}) {\n grid-template-areas: 'visual primary actions';\n grid-template-columns: auto 1fr auto;\n }\n\n &:has(${StyledVisual}):not(:has(${StyledSecondary})):not(\n :has(${StyledSummaryItemActions})\n ) {\n grid-template-areas: 'visual primary';\n grid-template-columns: auto 1fr;\n }\n\n &:not(:has(${StyledVisual})):has(${StyledSecondary}):has(${StyledSummaryItemActions}) {\n grid-template-areas: 'primary secondary actions';\n grid-template-columns: auto 1fr auto;\n }\n\n &:not(:has(${StyledVisual})):has(${StyledSecondary}):not(\n :has(${StyledSummaryItemActions})\n ) {\n grid-template-areas: 'primary secondary';\n grid-template-columns: auto 1fr;\n }\n\n &:not(:has(${StyledVisual})):not(:has(${StyledSecondary})):has(\n ${StyledSummaryItemActions}\n ) {\n grid-template-areas: 'primary actions';\n grid-template-columns: auto 1fr;\n }\n\n &:not(:has(${StyledVisual})):not(:has(${StyledSecondary})):not(\n :has(${StyledSummaryItemActions})\n ) {\n grid-template-areas: 'primary';\n grid-template-columns: 1fr;\n flex-grow: 0;\n }\n\n & > ${StyledPrimary} {\n ${ellipsisOverflow};\n }\n\n & > ${StyledSecondary} {\n ${ellipsisOverflow};\n\n ul {\n li {\n ${ellipsisOverflow};\n }\n justify-content: end;\n }\n }\n\n & > ${StyledSummaryItemActions} > ${StyledFlex} {\n justify-content: end;\n }\n }\n `}\n\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n ${itemLayout === 'stacked' &&\n css`\n &:has(${StyledSecondary})\n > ${StyledVisual},\n &:has(${StyledSecondary})\n > ${StyledSummaryItemActions} {\n height: ${base['hit-area']['finger-min']};\n }\n `}\n }\n\n &:focus-within {\n background-color: ${activeColor};\n }\n\n &:hover {\n ${StyledCheckMarkIcon} {\n visibility: visible;\n ${mode === 'single-select' &&\n css`\n ${isChecked\n ? css`\n color: ${checkedBackground};\n `\n : css`\n visibility: hidden;\n `}\n `}\n ${mode === 'multi-select' &&\n css`\n ${!isChecked &&\n css`\n border-color: ${components['form-control'][':hover']['border-color']};\n `}\n `}\n }\n }\n\n &:hover:not([aria-disabled='true']) {\n background-color: ${hoverColor};\n }\n\n a:first-of-type {\n display: block;\n width: 100%;\n text-decoration: none;\n color: inherit;\n }\n\n / The enclosing menu item has required min-height already set /\n ${isParentItem &&\n selectableParent &&\n css`\n ${StyledSummaryItemActions} ${StyledButton} {\n min-height: unset;\n }\n `}\n\n ${isParentItem &&\n !selectableParent &&\n (mode === 'multi-select' \|\| mode === 'single-select') &&\n css`\n padding-inline-start: calc(1.125rem + ${base.spacing});\n `}\n\n ${StyledGrid} {\n flex-grow: 1;\n }\n\n ${StyledCheckMarkIcon} {\n margin-inline-start: 0;\n ${mode === 'single-select' &&\n css`\n ${isChecked\n ? css`\n color: ${checkedBackground};\n `\n : css`\n visibility: hidden;\n `}\n `}\n ${mode === 'multi-select' &&\n css`\n ${isChecked\n ? css`\n color: ${checkedForeground};\n background-color: ${checkedBackground};\n border: 0.0625rem solid ${components['radio-check'][':checked']['border-color']};\n `\n : css`\n color: transparent;\n border: 0.0625rem solid ${components['radio-check']['border-color']};\n `}\n border-radius: min(\n calc(${base['border-radius']} ${components.checkbox['border-radius']}),\n 0.25rem\n );\n `}\n }\n\n &[aria-disabled='true'] {\n cursor: not-allowed;\n background-color: ${components['form-control'][':disabled']['background-color']};\n opacity: ${base['disabled-opacity']};\n }\n `;\n }\n);\n\nStyledMenuItem.defaultProps = defaultThemeProp;\n\nexport const StyledAncestors = styled.div`\n ${StyledIcon} {\n width: 1em;\n height: 1em;\n }\n\n & > ${StyledText} {\n ${ellipsisOverflow};\n }\n`;\n\nexport const StyledVisibilityHidden = styled.p`\n ${hideVisually}\n`;\n\nexport const StyledSeparator = styled.li(({ theme }) => {\n return css`\n height: 0.0625rem;\n background-color: ${theme.base.palette['border-line']};\n margin: ${theme.base.spacing} 0;\n `;\n});\n\nStyledSeparator.defaultProps = defaultThemeProp;\n\nexport const StyledMenuGroupHeader = styled.div(({ theme }) => {\n return css`\n min-height: ${theme.base['hit-area']['mouse-min']};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n background-color: ${theme.base.palette['secondary-background']};\n\n @media (pointer: coarse) {\n min-height: ${theme.base['hit-area']['finger-min']};\n }\n `;\n});\n\nStyledMenuGroupHeader.defaultProps = defaultThemeProp;\n\nexport const StyledMenuListHeader = styled.legend(({ theme: { base } }) => {\n const hoverColor = tryCatch(() =>\n mix(0.95, base.palette['primary-background'], base.palette.interactive)\n );\n const activeColor = tryCatch(() =>\n mix(0.85, base.palette['primary-background'], base.palette.interactive)\n );\n\n return css`\n cursor: pointer;\n width: 100%;\n background-color: ${base.palette['primary-background']};\n\n &:first-child {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n\n &:last-child {\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n }\n\n &:focus-within {\n box-shadow: ${base.shadow['focus-inset']};\n background-color: ${activeColor};\n }\n\n &:hover:not([aria-disabled='true']):not([data-current='true']) {\n background-color: ${hoverColor};\n }\n color: ${base.palette['foreground-color']};\n padding: calc(0.5 * ${base.spacing}) ${base.spacing};\n text-align: start;\n border-radius: inherit;\n\n > ${StyledGrid} {\n grid-column-gap: ${base.spacing};\n }\n\n ${StyledIcon} {\n /* Fixes vertical align issue increasing box size beyond square /\n display: block;\n }\n `;\n});\n\nStyledMenuListHeader.defaultProps = defaultThemeProp;\n\nexport const StyledMenuList = styled.ul(\n ({ theme }) => css`\n overflow-x: hidden;\n overflow-y: auto;\n list-style: none;\n height: 100%;\n border-radius: inherit;\n\n ${StyledEmptyState} {\n padding: ${theme.base.spacing};\n height: auto;\n }\n\n li:not(:first-child):not([role='presentation']) > ${StyledMenuGroupHeader} {\n margin-block-start: ${theme.base.spacing};\n }\n `\n);\n\nStyledMenuList.defaultProps = defaultThemeProp;\n\nexport const StyledMenuListContainer = styled.fieldset(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n border: 0;\n border-radius: inherit;\n `;\n});\n\nStyledMenuListContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFlyoutMenuListContainer = styled(StyledMenuListContainer)`\n min-width: 10rem;\n`;\n\nexport const StyledLoadingItem = styled.li`\n display: block;\n position: relative;\n height: 2.8rem;\n`;\n\nexport const StyledMenuListWrapper = styled.div(\n ({ theme }) => css`\n position: relative;\n overflow: hidden;\n transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n & > fieldset:first-child {\n position: relative;\n }\n\n &:first-child {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n\n &:last-child {\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n }\n\n ${StyledMetaList} ${StyledMetaListItem} {\n display: inline;\n vertical-align: baseline;\n margin: 0;\n }\n `\n);\n\nStyledMenuListWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledMenu = styled.div(({ theme }) => {\n const borderStyle = `0.0625rem solid ${theme.base.palette['border-line']}`;\n\n return css`\n display: flex;\n flex-direction: column;\n\n &,\n ${StyledMenuListWrapper} {\n max-height: inherit;\n }\n\n &:focus {\n box-shadow: ${theme.base.shadow.focus};\n outline: none;\n }\n\n &:first-child {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n\n &:last-child {\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n }\n\n &[data-active-scope='true'] [data-current='true'] {\n box-shadow: ${theme.base.shadow['focus-inset']};\n\n @media (forced-colors: active) {\n outline: 0.125rem solid Highlight;\n outline-offset: -0.125rem;\n }\n\n &:first-child {\n border-start-start-radius: inherit;\n border-start-end-radius: inherit;\n }\n\n &:last-child {\n border-end-start-radius: inherit;\n border-end-end-radius: inherit;\n }\n }\n\n ${StyledVisuallyHiddenText}:first-child {\n + ${StyledMenuListWrapper}, + header {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n }\n\n > header,\n > footer {\n padding: ${theme.base.spacing};\n }\n\n > header {\n border-bottom: ${borderStyle};\n }\n\n > footer {\n border-top: ${borderStyle};\n }\n `;\n});\n\nStyledMenu.defaultProps = defaultThemeProp;\n\nexport const StyledMenuFilter = styled.div(({ theme }) => {\n const borderRadius = `calc(${theme.components['search-input']['border-radius']} * ${theme.base['border-radius']})`;\n\n return css`\n position: relative;\n min-height: ${theme.components.input.height};\n height: ${theme.components.input.height};\n --icon-start-padding: calc(1.5 * ${theme.components.input.padding});\n /* stylelint-disable-next-line unit-allowed-list /\n --icon-size: max(1.125rem, 14px);\n\n @media (pointer: coarse) {\n min-height: ${theme.base['hit-area']['finger-min']};\n min-width: ${theme.base['hit-area']['finger-min']};\n }\n\n ${StyledFormControl} {\n height: 100%;\n border-radius: ${borderRadius};\n padding-inline-start: calc(\n var(--icon-start-padding) + var(--icon-size) + (0.5 ${theme.components.input.padding})\n );\n padding-inline-end: calc(1.5 * ${theme.components.input.padding});\n\n &::-webkit-search-cancel-button {\n display: none;\n }\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &:focus:not([disabled]) {\n box-shadow: ${theme.base.shadow['focus-inset']};\n border-color: ${theme.components['form-control']['border-color']};\n\n :hover {\n border-color: ${theme.components['form-control'][':hover']['border-color']};\n }\n }\n }\n `;\n});\n\nStyledMenuFilter.defaultProps = defaultThemeProp;\n\nexport const StyledFilterIcon = styled(Icon)(({ theme }) => {\n const iconColor = tryCatch(() => transparentize(0.3, theme.base.palette['foreground-color']));\n\n return css`\n position: absolute;\n pointer-events: none;\n color: ${iconColor};\n inset-inline-start: var(--icon-start-padding);\n /* stylelint-disable unit-allowed-list /\n inset-block-start: calc(0.5 (${theme.components.input.height} - max(1.125rem, 14px)));\n\n @media (pointer: coarse) {\n inset-block-start: calc(\n 0.5 * (${theme.base['hit-area']['finger-min']} - max(1.125rem, 14px))\n );\n }\n /* stylelint-enable unit-allowed-list */\n `;\n});\n\nStyledFilterIcon.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"Menu.styles.js","sourceRoot":"","sources":["../../../src/components/Menu/Menu.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { hideVisually, mix, transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport { StyledEmptyState } from '../EmptyState';\nimport Icon, { StyledIcon } from '../Icon';\nimport { StyledGrid } from '../Grid';\nimport { tryCatch } from '../../utils';\nimport { StyledText } from '../Text';\nimport { StyledVisuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText';\nimport { StyledMetaList, StyledMetaListItem } from '../MetaList/MetaList';\nimport Button, { StyledButton } from '../Button';\nimport { readableColor } from '../../styles';\nimport {\n StyledPrimary,\n StyledSecondary,\n StyledSummaryItem,\n StyledSummaryItemActions,\n StyledVisual\n} from '../SummaryItem';\nimport { ellipsisOverflow } from '../../styles/mixins';\nimport { StyledFlex } from '../Flex';\nimport { StyledFormControl } from '../FormControl';\n\nimport type { MenuProps } from './Menu.types';\n\nexport const StyledExpandButton = styled(Button)`\n align-self: center;\n`;\n\nexport const StyledCheckMarkIcon = styled(Icon)``;\n\nexport const StyledMenuItem = styled.li<{\n isParentItem: boolean;\n mode?: MenuProps['mode'];\n itemLayout?: MenuProps['itemLayout'];\n isChecked?: boolean;\n selectableParent?: boolean;\n}>(\n ({\n theme: { base, components },\n isParentItem,\n itemLayout,\n mode = 'action',\n isChecked = false,\n selectableParent = false\n }) => {\n const activeColor = tryCatch(() =>\n mix(0.85, base.palette['primary-background'], base.palette.interactive)\n );\n const hoverColor = tryCatch(() =>\n mix(0.95, base.palette['primary-background'], base.palette.interactive)\n );\n\n const checkedBackground = components['radio-check'][':checked']['background-color'];\n const checkedForeground = tryCatch(() => readableColor(checkedBackground));\n\n return css`\n min-height: ${base['hit-area']['mouse-min']};\n padding-block: calc(0.75 * ${base.spacing});\n padding-inline: ${base.spacing};\n cursor: pointer;\n\n > ${StyledSummaryItem} {\n ${StyledSummaryItemActions}, ${StyledVisual} {\n display: grid;\n align-items: center;\n }\n\n > ${StyledVisual}:has(> :nth-child(2)) {\n grid-template-columns: auto auto;\n grid-column-gap: ${base.spacing};\n }\n\n ${itemLayout === 'stacked' &&\n css`\n &:has(${StyledSecondary})\n > ${StyledVisual},\n &:has(${StyledSecondary})\n > ${StyledSummaryItemActions} {\n height: ${base['hit-area']['mouse-min']};\n align-self: start;\n }\n `}\n }\n\n ${itemLayout === 'inline' &&\n css`\n justify-content: flex-start;\n\n ${StyledSummaryItem} {\n /* Sets grid columns based on SummaryItem content combinations /\n\n &:has(${StyledVisual}):has(${StyledSecondary}):has(${StyledSummaryItemActions}) {\n grid-template-areas: 'visual primary secondary actions';\n grid-template-columns: auto auto 1fr auto;\n }\n\n &:has(${StyledVisual}):has(${StyledSecondary}):not(:has(${StyledSummaryItemActions})) {\n grid-template-areas: 'visual primary secondary';\n grid-template-columns: auto auto 1fr;\n }\n\n &:has(${StyledVisual}):not(:has(${StyledSecondary})):has(${StyledSummaryItemActions}) {\n grid-template-areas: 'visual primary actions';\n grid-template-columns: auto 1fr auto;\n }\n\n &:has(${StyledVisual}):not(:has(${StyledSecondary})):not(\n :has(${StyledSummaryItemActions})\n ) {\n grid-template-areas: 'visual primary';\n grid-template-columns: auto 1fr;\n }\n\n &:not(:has(${StyledVisual})):has(${StyledSecondary}):has(${StyledSummaryItemActions}) {\n grid-template-areas: 'primary secondary actions';\n grid-template-columns: auto 1fr auto;\n }\n\n &:not(:has(${StyledVisual})):has(${StyledSecondary}):not(\n :has(${StyledSummaryItemActions})\n ) {\n grid-template-areas: 'primary secondary';\n grid-template-columns: auto 1fr;\n }\n\n &:not(:has(${StyledVisual})):not(:has(${StyledSecondary})):has(\n ${StyledSummaryItemActions}\n ) {\n grid-template-areas: 'primary actions';\n grid-template-columns: auto 1fr;\n }\n\n &:not(:has(${StyledVisual})):not(:has(${StyledSecondary})):not(\n :has(${StyledSummaryItemActions})\n ) {\n grid-template-areas: 'primary';\n grid-template-columns: 1fr;\n flex-grow: 0;\n }\n\n & > ${StyledPrimary} {\n ${ellipsisOverflow};\n }\n\n & > ${StyledSecondary} {\n ${ellipsisOverflow};\n\n ul {\n li {\n ${ellipsisOverflow};\n }\n justify-content: end;\n }\n }\n\n & > ${StyledSummaryItemActions} > ${StyledFlex} {\n justify-content: end;\n }\n }\n `}\n\n @media (pointer: coarse) {\n min-height: ${base['hit-area']['finger-min']};\n ${itemLayout === 'stacked' &&\n css`\n &:has(${StyledSecondary})\n > ${StyledVisual},\n &:has(${StyledSecondary})\n > ${StyledSummaryItemActions} {\n height: ${base['hit-area']['finger-min']};\n }\n `}\n }\n\n &:focus-within {\n background-color: ${activeColor};\n }\n\n &:hover {\n ${StyledCheckMarkIcon} {\n visibility: visible;\n ${mode === 'single-select' &&\n css`\n ${isChecked\n ? css`\n color: ${checkedBackground};\n `\n : css`\n visibility: hidden;\n `}\n `}\n ${mode === 'multi-select' &&\n css`\n ${!isChecked &&\n css`\n border-color: ${components['form-control'][':hover']['border-color']};\n `}\n `}\n }\n }\n\n &:hover:not([aria-disabled='true']) {\n background-color: ${hoverColor};\n }\n\n a:first-of-type {\n display: block;\n width: 100%;\n text-decoration: none;\n color: inherit;\n }\n\n / The enclosing menu item has required min-height already set /\n ${isParentItem &&\n selectableParent &&\n css`\n ${StyledSummaryItemActions} ${StyledButton} {\n min-height: unset;\n }\n `}\n\n ${isParentItem &&\n !selectableParent &&\n (mode === 'multi-select' \|\| mode === 'single-select') &&\n css`\n padding-inline-start: calc(1.125rem + 2 ${base.spacing});\n `}\n\n ${StyledGrid} {\n flex-grow: 1;\n }\n\n ${StyledCheckMarkIcon} {\n margin-inline-start: 0;\n ${mode === 'single-select' &&\n css`\n ${isChecked\n ? css`\n color: ${checkedBackground};\n `\n : css`\n visibility: hidden;\n `}\n `}\n ${mode === 'multi-select' &&\n css`\n ${isChecked\n ? css`\n color: ${checkedForeground};\n background-color: ${checkedBackground};\n border: 0.0625rem solid ${components['radio-check'][':checked']['border-color']};\n `\n : css`\n color: transparent;\n border: 0.0625rem solid ${components['radio-check']['border-color']};\n `}\n border-radius: min(\n calc(${base['border-radius']} * ${components.checkbox['border-radius']}),\n 0.25rem\n );\n `}\n }\n\n &[aria-disabled='true'] {\n cursor: not-allowed;\n background-color: ${components['form-control'][':disabled']['background-color']};\n opacity: ${base['disabled-opacity']};\n }\n `;\n }\n);\n\nStyledMenuItem.defaultProps = defaultThemeProp;\n\nexport const StyledAncestors = styled.div`\n ${StyledIcon} {\n width: 1em;\n height: 1em;\n }\n\n & > ${StyledText} {\n ${ellipsisOverflow};\n }\n`;\n\nexport const StyledVisibilityHidden = styled.p`\n ${hideVisually}\n`;\n\nexport const StyledSeparator = styled.li(({ theme }) => {\n return css`\n height: 0.0625rem;\n background-color: ${theme.base.palette['border-line']};\n margin: ${theme.base.spacing} 0;\n `;\n});\n\nStyledSeparator.defaultProps = defaultThemeProp;\n\nexport const StyledMenuGroupHeader = styled.div(({ theme }) => {\n return css`\n min-height: ${theme.base['hit-area']['mouse-min']};\n font-weight: ${theme.base['font-weight']['semi-bold']};\n background-color: ${theme.base.palette['secondary-background']};\n\n @media (pointer: coarse) {\n min-height: ${theme.base['hit-area']['finger-min']};\n }\n `;\n});\n\nStyledMenuGroupHeader.defaultProps = defaultThemeProp;\n\nexport const StyledMenuListHeader = styled.legend(({ theme: { base } }) => {\n const hoverColor = tryCatch(() =>\n mix(0.95, base.palette['primary-background'], base.palette.interactive)\n );\n const activeColor = tryCatch(() =>\n mix(0.85, base.palette['primary-background'], base.palette.interactive)\n );\n\n return css`\n cursor: pointer;\n width: 100%;\n background-color: ${base.palette['primary-background']};\n\n &:first-child {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n\n &:last-child {\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n }\n\n &:focus-within {\n box-shadow: ${base.shadow['focus-inset']};\n background-color: ${activeColor};\n }\n\n &:hover:not([aria-disabled='true']):not([data-current='true']) {\n background-color: ${hoverColor};\n }\n color: ${base.palette['foreground-color']};\n padding: calc(0.5 * ${base.spacing}) ${base.spacing};\n text-align: start;\n border-radius: inherit;\n\n > ${StyledGrid} {\n grid-column-gap: ${base.spacing};\n }\n\n ${StyledIcon} {\n /* Fixes vertical align issue increasing box size beyond square /\n display: block;\n }\n `;\n});\n\nStyledMenuListHeader.defaultProps = defaultThemeProp;\n\nexport const StyledMenuList = styled.ul(\n ({ theme }) => css`\n overflow-x: hidden;\n overflow-y: auto;\n list-style: none;\n height: 100%;\n border-radius: inherit;\n\n ${StyledEmptyState} {\n padding: ${theme.base.spacing};\n height: auto;\n }\n\n li:not(:first-child):not([role='presentation']) > ${StyledMenuGroupHeader} {\n margin-block-start: ${theme.base.spacing};\n }\n `\n);\n\nStyledMenuList.defaultProps = defaultThemeProp;\n\nexport const StyledMenuListContainer = styled.fieldset(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n border: 0;\n border-radius: inherit;\n `;\n});\n\nStyledMenuListContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFlyoutMenuListContainer = styled(StyledMenuListContainer)`\n min-width: 10rem;\n`;\n\nexport const StyledLoadingItem = styled.li`\n display: block;\n position: relative;\n height: 2.8rem;\n`;\n\nexport const StyledMenuListWrapper = styled.div(\n ({ theme }) => css`\n position: relative;\n overflow: hidden;\n transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n & > fieldset:first-child {\n position: relative;\n }\n\n &:first-child {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n\n &:last-child {\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n }\n\n ${StyledMetaList} ${StyledMetaListItem} {\n display: inline;\n vertical-align: baseline;\n margin: 0;\n }\n `\n);\n\nStyledMenuListWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledMenu = styled.div(({ theme }) => {\n const borderStyle = `0.0625rem solid ${theme.base.palette['border-line']}`;\n\n return css`\n display: flex;\n flex-direction: column;\n\n &,\n ${StyledMenuListWrapper} {\n max-height: inherit;\n }\n\n &:focus-visible {\n box-shadow: ${theme.base.shadow.focus};\n outline: none;\n }\n\n &:first-child {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n\n &:last-child {\n border-bottom-left-radius: inherit;\n border-bottom-right-radius: inherit;\n }\n\n &[data-active-scope='true'] [data-current='true'] {\n box-shadow: ${theme.base.shadow['focus-inset']};\n\n @media (forced-colors: active) {\n outline: 0.125rem solid Highlight;\n outline-offset: -0.125rem;\n }\n\n &:first-child {\n border-start-start-radius: inherit;\n border-start-end-radius: inherit;\n }\n\n &:last-child {\n border-end-start-radius: inherit;\n border-end-end-radius: inherit;\n }\n }\n\n ${StyledVisuallyHiddenText}:first-child {\n + ${StyledMenuListWrapper}, + header {\n border-top-left-radius: inherit;\n border-top-right-radius: inherit;\n }\n }\n\n > header,\n > footer {\n padding: ${theme.base.spacing};\n }\n\n > header {\n border-bottom: ${borderStyle};\n }\n\n > footer {\n border-top: ${borderStyle};\n }\n `;\n});\n\nStyledMenu.defaultProps = defaultThemeProp;\n\nexport const StyledMenuFilter = styled.div(({ theme }) => {\n const borderRadius = `calc(${theme.components['search-input']['border-radius']} * ${theme.base['border-radius']})`;\n\n return css`\n position: relative;\n min-height: ${theme.components.input.height};\n height: ${theme.components.input.height};\n --icon-start-padding: calc(1.5 * ${theme.components.input.padding});\n /* stylelint-disable-next-line unit-allowed-list /\n --icon-size: max(1.125rem, 14px);\n\n @media (pointer: coarse) {\n min-height: ${theme.base['hit-area']['finger-min']};\n min-width: ${theme.base['hit-area']['finger-min']};\n }\n\n ${StyledFormControl} {\n height: 100%;\n border-radius: ${borderRadius};\n padding-inline-start: calc(\n var(--icon-start-padding) + var(--icon-size) + (0.5 ${theme.components.input.padding})\n );\n padding-inline-end: calc(1.5 * ${theme.components.input.padding});\n\n &::-webkit-search-cancel-button {\n display: none;\n }\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &:focus-visible:not([disabled]) {\n box-shadow: ${theme.base.shadow['focus-inset']};\n border-color: ${theme.components['form-control']['border-color']};\n\n :hover {\n border-color: ${theme.components['form-control'][':hover']['border-color']};\n }\n }\n }\n `;\n});\n\nStyledMenuFilter.defaultProps = defaultThemeProp;\n\nexport const StyledFilterIcon = styled(Icon)(({ theme }) => {\n const iconColor = tryCatch(() => transparentize(0.3, theme.base.palette['foreground-color']));\n\n return css`\n position: absolute;\n pointer-events: none;\n color: ${iconColor};\n inset-inline-start: var(--icon-start-padding);\n /* stylelint-disable unit-allowed-list /\n inset-block-start: calc(0.5 (${theme.components.input.height} - max(1.125rem, 14px)));\n\n @media (pointer: coarse) {\n inset-block-start: calc(\n 0.5 * (${theme.base['hit-area']['finger-min']} - max(1.125rem, 14px))\n );\n }\n /* stylelint-enable unit-allowed-list */\n `;\n});\n\nStyledFilterIcon.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Menu/MenuItem.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAehD,OAAO,KAAK,EAA6B,aAAa,EAAE,MAAM,cAAc,CAAC;;;;~~AA2P7E~~,wBAAyD"}
1	+ {"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAc,MAAM,OAAO,CAAC;AAI3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAehD,OAAO,KAAK,EAA6B,aAAa,EAAE,MAAM,cAAc,CAAC;;;;AA4P7E,wBAAyD"}

package/lib/components/Menu/MenuItem.js CHANGED Viewed

@@ -66,7 +66,9 @@ const MenuItem = ({ testId, id, primary, secondary, ancestors, visual: visualPro
     useHighlight(primaryRef, accentPattern);
     const secondaryContent = ancestors ? (_jsx(AncestorPath, { ancestors: ancestors })) : (secondary && _jsx(MetaList, { items: secondary, id: secondaryId }));
     const [itemRef, setItemRef] = useElement();
-    const visual = (_jsxs(_Fragment, { children: [selectionMode && (!items || selectableParent) && !disabled && (_jsx(StyledCheckMarkIcon, { name: 'check' })), visualProp] }));
+    const showCheckmark = selectionMode && (!items || selectableParent) && !disabled;
+    const showVisual = showCheckmark || visualProp;
+    const visual = showVisual && (_jsxs(_Fragment, { children: [showCheckmark && _jsx(StyledCheckMarkIcon, { name: 'check' }), visualProp] }));
     const summaryItem = (_jsxs(_Fragment, { children: [_jsx(SummaryItem, { primary: !items ? _jsx(Text, { ref: primaryRef, children: primary }) : primary, secondary: secondaryContent, layout: itemLayout, visual: visual, actions: items || count ? (_jsxs(Flex, { container: { gap: 1, alignItems: 'center', justify: 'center' }, children: [count !== undefined && (_jsx(Count, { id: itemCountId, "aria-label": t('menu_item_count', [count]), children: count })), items && _jsx(DrillDown, { expandHandler: selectableParent ? expandHandler : undefined })] })) : undefined }), tooltip && (_jsx(Tooltip, { target: itemRef, hideDelay: 'none', showDelay: 'short', children: tooltip }))] }));
     const itemLabel = useMemo(() => {
         const collapsedLabel = t('menu_collapsed', [primary]);

package/lib/components/Menu/MenuItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, useCallback, useContext, useMemo, useRef } from 'react';\nimport type { FunctionComponent, MouseEvent } from 'react';\n\nimport MetaList from '../MetaList';\nimport SummaryItem from '../SummaryItem';\nimport type { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\nimport BareButton from '../Button/BareButton';\nimport { withTestIds } from '../../utils';\nimport { useElement, useHighlight, useI18n, useDirection, useTestIds } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Button from '../Button';\n\nimport menuHelpers from './helpers';\nimport type { AcceptedMouseEventElement, MenuItemProps } from './Menu.types';\nimport MenuContext from './Menu.context';\nimport { StyledAncestors, StyledCheckMarkIcon, StyledMenuItem } from './Menu.styles';\nimport { getMenuItemTestIds } from './Menu.test-ids';\n\nregisterIcon(caretLeftIcon, caretRightIcon, checkIcon);\n\nconst DrillDown = ({\n expandHandler\n}: {\n expandHandler?: (e: MouseEvent<AcceptedMouseEventElement>) => void;\n}) => {\n const { end } = useDirection();\n\n const icon = <Icon name={`caret-${end}`} />;\n\n return expandHandler ? (\n <Button as='span' icon variant='simple' aria-hidden onClick={expandHandler}>\n {icon}\n </Button>\n ) : (\n icon\n );\n};\n\nconst AncestorPath = ({ ancestors = [] }: Pick<MenuItemProps, 'ancestors'>) => {\n const truncatedPath = ancestors.length > 2;\n const pathParts = truncatedPath ? [ancestors[0], ancestors[ancestors.length - 1]] : ancestors;\n\n const { end } = useDirection();\n\n return (\n <Flex\n container={{ gap: 0.5, alignItems: 'center' }}\n as={StyledAncestors}\n title={ancestors.map(a => (menuHelpers.isItem(a) ? a.primary : a.label)).join(' > ')}\n >\n {pathParts.map((ancestor, i, arr) => {\n const label = menuHelpers.isItem(ancestor) ? ancestor.primary : ancestor.label;\n return (\n <Fragment key={ancestor.id}>\n <Text variant='secondary'>{label}</Text>\n {i < arr.length - 1 && (\n <>\n <Text variant='secondary'>\n <Icon name={`caret-${end}`} />\n </Text>\n {truncatedPath && (\n <>\n <Text variant='secondary'>…</Text>\n <Text variant='secondary'>\n <Icon name={`caret-${end}`} />\n </Text>\n </>\n )}\n </>\n )}\n </Fragment>\n );\n })}\n </Flex>\n );\n};\n\nconst MenuItem: FunctionComponent<MenuItemProps & ForwardProps> = ({\n testId,\n id,\n primary,\n secondary,\n ancestors,\n visual: visualProp,\n count,\n items,\n selected,\n partial,\n href,\n tooltip,\n onClick,\n onExpand,\n disabled,\n role = 'menuitem',\n ...restProps\n}: MenuItemProps & ForwardProps) => {\n const t = useI18n();\n const {\n mode,\n onItemClick,\n itemLayout,\n accent,\n variant: menuVariant,\n setFocusDescendant,\n getScopedItemId,\n arrowNavigationUnsupported\n } = useContext(MenuContext);\n\n const testIds = useTestIds(testId, getMenuItemTestIds);\n\n const selectionMode = mode === 'single-select' \|\| mode === 'multi-select';\n const selectableParent = items && typeof selected === 'boolean';\n const itemId = useMemo(() => getScopedItemId(id), [id, getScopedItemId]);\n\n const itemCountId = `${itemId}-count`;\n const secondaryId = `${itemId}-secondary`;\n\n const clickHandler = useCallback(\n (e: MouseEvent<AcceptedMouseEventElement>) => {\n const mouseClick = e.detail > 0;\n\n if (mouseClick) {\n const target = e.target as HTMLElement;\n const focusAtEl =\n target.getAttribute('role') === role ? target : target.closest(`li[role=\"${role}\"]`);\n\n if (focusAtEl) setFocusDescendant(focusAtEl as HTMLElement);\n }\n onClick?.(id, e);\n onItemClick?.(id, e);\n },\n [onClick, onItemClick, id]\n );\n\n const expandHandler = useCallback(\n (e: MouseEvent<AcceptedMouseEventElement>) => {\n onExpand?.(id, e);\n e.stopPropagation();\n },\n [onExpand, id]\n );\n\n const primaryRef = useRef<HTMLElement>(null);\n const accentPattern = useMemo(() => {\n if (!accent \|\| items) return undefined;\n return typeof accent === 'function' ? accent(primary) : accent;\n }, [accent, items, primary]);\n useHighlight(primaryRef, accentPattern);\n\n const secondaryContent = ancestors ? (\n <AncestorPath ancestors={ancestors} />\n ) : (\n secondary && <MetaList items={secondary} id={secondaryId} />\n );\n\n const [itemRef, setItemRef] = useElement();\n\n const visual = (\n <>\n {selectionMode && (!items \|\| selectableParent) && !disabled && (\n <StyledCheckMarkIcon name='check' />\n )}\n {visualProp}\n </>\n );\n const summaryItem = (\n <>\n <SummaryItem\n primary={!items ? <Text ref={primaryRef}>{primary}</Text> : primary}\n secondary={secondaryContent}\n layout={itemLayout}\n visual={visual}\n actions={\n items \|\| count ? (\n <Flex container={{ gap: 1, alignItems: 'center', justify: 'center' }}>\n {count !== undefined && (\n <Count id={itemCountId} aria-label={t('menu_item_count', [count])}>\n {count}\n </Count>\n )}\n {items && <DrillDown expandHandler={selectableParent ? expandHandler : undefined} />}\n </Flex>\n ) : undefined\n }\n />\n {tooltip && (\n <Tooltip target={itemRef} hideDelay='none' showDelay='short'>\n {tooltip}\n </Tooltip>\n )}\n </>\n );\n\n const itemLabel = useMemo(() => {\n const collapsedLabel = t('menu_collapsed', [primary]);\n if (items) {\n return arrowNavigationUnsupported\n ? t('menu_item_shift_space_expand_collapse', [collapsedLabel])\n : t('menu_item_expand_arrow', [collapsedLabel]);\n }\n return primary;\n }, [selected, primary, items]);\n\n const ariaDescribedBy = useMemo(() => {\n const hasSecondary = !!secondary;\n let idString: string;\n\n if (hasSecondary) {\n idString = secondaryId;\n if (count !== undefined && count >= 0) {\n idString = `${idString} ${itemCountId}`;\n }\n } else if (count !== undefined && count >= 0) {\n idString = itemCountId;\n } else idString = '';\n\n return idString;\n }, [items, secondary, itemCountId, secondaryId]);\n\n const isItemSelected = selectionMode && (!items \|\| selectableParent) ? !!selected : undefined;\n\n return (\n <Flex\n ref={setItemRef}\n data-testid={testIds.root}\n {...restProps}\n container={{ alignItems: 'center', justify: 'between', gap: 1 }}\n id={itemId}\n as={StyledMenuItem}\n aria-label={itemLabel}\n aria-describedby={ariaDescribedBy}\n role={role}\n aria-disabled={disabled}\n data-expand={!!items}\n itemLayout={itemLayout}\n tabIndex={-1}\n onMouseDown={(e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n e.preventDefault();\n }}\n onClick={(e: MouseEvent<AcceptedMouseEventElement>) => {\n if (disabled) {\n return;\n }\n return items && typeof selected !== 'boolean' ? expandHandler(e) : clickHandler(e);\n }}\n onMouseEnter={menuVariant === 'flyout' ? expandHandler : undefined}\n href={href}\n mode={mode}\n isParentItem={!!items}\n aria-selected={role !== 'menuitem' ? isItemSelected : undefined}\n isChecked={isItemSelected}\n selectableParent={selectableParent}\n >\n {href && !selectionMode ? (\n <BareButton href={href} tabIndex='-1'>\n {summaryItem}\n </BareButton>\n ) : (\n summaryItem\n )}\n </Flex>\n );\n};\n\nexport default withTestIds(MenuItem, getMenuItemTestIds);\n"]}
1	+ {"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../src/components/Menu/MenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Fragment, useCallback, useContext, useMemo, useRef } from 'react';\nimport type { FunctionComponent, MouseEvent } from 'react';\n\nimport MetaList from '../MetaList';\nimport SummaryItem from '../SummaryItem';\nimport type { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport Icon, { registerIcon } from '../Icon';\nimport * as caretLeftIcon from '../Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '../Icon/icons/caret-right.icon';\nimport * as checkIcon from '../Icon/icons/check.icon';\nimport Text from '../Text';\nimport { Count } from '../Badges';\nimport BareButton from '../Button/BareButton';\nimport { withTestIds } from '../../utils';\nimport { useElement, useHighlight, useI18n, useDirection, useTestIds } from '../../hooks';\nimport Tooltip from '../Tooltip';\nimport Button from '../Button';\n\nimport menuHelpers from './helpers';\nimport type { AcceptedMouseEventElement, MenuItemProps } from './Menu.types';\nimport MenuContext from './Menu.context';\nimport { StyledAncestors, StyledCheckMarkIcon, StyledMenuItem } from './Menu.styles';\nimport { getMenuItemTestIds } from './Menu.test-ids';\n\nregisterIcon(caretLeftIcon, caretRightIcon, checkIcon);\n\nconst DrillDown = ({\n expandHandler\n}: {\n expandHandler?: (e: MouseEvent<AcceptedMouseEventElement>) => void;\n}) => {\n const { end } = useDirection();\n\n const icon = <Icon name={`caret-${end}`} />;\n\n return expandHandler ? (\n <Button as='span' icon variant='simple' aria-hidden onClick={expandHandler}>\n {icon}\n </Button>\n ) : (\n icon\n );\n};\n\nconst AncestorPath = ({ ancestors = [] }: Pick<MenuItemProps, 'ancestors'>) => {\n const truncatedPath = ancestors.length > 2;\n const pathParts = truncatedPath ? [ancestors[0], ancestors[ancestors.length - 1]] : ancestors;\n\n const { end } = useDirection();\n\n return (\n <Flex\n container={{ gap: 0.5, alignItems: 'center' }}\n as={StyledAncestors}\n title={ancestors.map(a => (menuHelpers.isItem(a) ? a.primary : a.label)).join(' > ')}\n >\n {pathParts.map((ancestor, i, arr) => {\n const label = menuHelpers.isItem(ancestor) ? ancestor.primary : ancestor.label;\n return (\n <Fragment key={ancestor.id}>\n <Text variant='secondary'>{label}</Text>\n {i < arr.length - 1 && (\n <>\n <Text variant='secondary'>\n <Icon name={`caret-${end}`} />\n </Text>\n {truncatedPath && (\n <>\n <Text variant='secondary'>…</Text>\n <Text variant='secondary'>\n <Icon name={`caret-${end}`} />\n </Text>\n </>\n )}\n </>\n )}\n </Fragment>\n );\n })}\n </Flex>\n );\n};\n\nconst MenuItem: FunctionComponent<MenuItemProps & ForwardProps> = ({\n testId,\n id,\n primary,\n secondary,\n ancestors,\n visual: visualProp,\n count,\n items,\n selected,\n partial,\n href,\n tooltip,\n onClick,\n onExpand,\n disabled,\n role = 'menuitem',\n ...restProps\n}: MenuItemProps & ForwardProps) => {\n const t = useI18n();\n const {\n mode,\n onItemClick,\n itemLayout,\n accent,\n variant: menuVariant,\n setFocusDescendant,\n getScopedItemId,\n arrowNavigationUnsupported\n } = useContext(MenuContext);\n\n const testIds = useTestIds(testId, getMenuItemTestIds);\n\n const selectionMode = mode === 'single-select' \|\| mode === 'multi-select';\n const selectableParent = items && typeof selected === 'boolean';\n const itemId = useMemo(() => getScopedItemId(id), [id, getScopedItemId]);\n\n const itemCountId = `${itemId}-count`;\n const secondaryId = `${itemId}-secondary`;\n\n const clickHandler = useCallback(\n (e: MouseEvent<AcceptedMouseEventElement>) => {\n const mouseClick = e.detail > 0;\n\n if (mouseClick) {\n const target = e.target as HTMLElement;\n const focusAtEl =\n target.getAttribute('role') === role ? target : target.closest(`li[role=\"${role}\"]`);\n\n if (focusAtEl) setFocusDescendant(focusAtEl as HTMLElement);\n }\n onClick?.(id, e);\n onItemClick?.(id, e);\n },\n [onClick, onItemClick, id]\n );\n\n const expandHandler = useCallback(\n (e: MouseEvent<AcceptedMouseEventElement>) => {\n onExpand?.(id, e);\n e.stopPropagation();\n },\n [onExpand, id]\n );\n\n const primaryRef = useRef<HTMLElement>(null);\n const accentPattern = useMemo(() => {\n if (!accent \|\| items) return undefined;\n return typeof accent === 'function' ? accent(primary) : accent;\n }, [accent, items, primary]);\n useHighlight(primaryRef, accentPattern);\n\n const secondaryContent = ancestors ? (\n <AncestorPath ancestors={ancestors} />\n ) : (\n secondary && <MetaList items={secondary} id={secondaryId} />\n );\n\n const [itemRef, setItemRef] = useElement();\n\n const showCheckmark = selectionMode && (!items \|\| selectableParent) && !disabled;\n const showVisual = showCheckmark \|\| visualProp;\n\n const visual = showVisual && (\n <>\n {showCheckmark && <StyledCheckMarkIcon name='check' />}\n {visualProp}\n </>\n );\n const summaryItem = (\n <>\n <SummaryItem\n primary={!items ? <Text ref={primaryRef}>{primary}</Text> : primary}\n secondary={secondaryContent}\n layout={itemLayout}\n visual={visual}\n actions={\n items \|\| count ? (\n <Flex container={{ gap: 1, alignItems: 'center', justify: 'center' }}>\n {count !== undefined && (\n <Count id={itemCountId} aria-label={t('menu_item_count', [count])}>\n {count}\n </Count>\n )}\n {items && <DrillDown expandHandler={selectableParent ? expandHandler : undefined} />}\n </Flex>\n ) : undefined\n }\n />\n {tooltip && (\n <Tooltip target={itemRef} hideDelay='none' showDelay='short'>\n {tooltip}\n </Tooltip>\n )}\n </>\n );\n\n const itemLabel = useMemo(() => {\n const collapsedLabel = t('menu_collapsed', [primary]);\n if (items) {\n return arrowNavigationUnsupported\n ? t('menu_item_shift_space_expand_collapse', [collapsedLabel])\n : t('menu_item_expand_arrow', [collapsedLabel]);\n }\n return primary;\n }, [selected, primary, items]);\n\n const ariaDescribedBy = useMemo(() => {\n const hasSecondary = !!secondary;\n let idString: string;\n\n if (hasSecondary) {\n idString = secondaryId;\n if (count !== undefined && count >= 0) {\n idString = `${idString} ${itemCountId}`;\n }\n } else if (count !== undefined && count >= 0) {\n idString = itemCountId;\n } else idString = '';\n\n return idString;\n }, [items, secondary, itemCountId, secondaryId]);\n\n const isItemSelected = selectionMode && (!items \|\| selectableParent) ? !!selected : undefined;\n\n return (\n <Flex\n ref={setItemRef}\n data-testid={testIds.root}\n {...restProps}\n container={{ alignItems: 'center', justify: 'between', gap: 1 }}\n id={itemId}\n as={StyledMenuItem}\n aria-label={itemLabel}\n aria-describedby={ariaDescribedBy}\n role={role}\n aria-disabled={disabled}\n data-expand={!!items}\n itemLayout={itemLayout}\n tabIndex={-1}\n onMouseDown={(e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => {\n e.preventDefault();\n }}\n onClick={(e: MouseEvent<AcceptedMouseEventElement>) => {\n if (disabled) {\n return;\n }\n return items && typeof selected !== 'boolean' ? expandHandler(e) : clickHandler(e);\n }}\n onMouseEnter={menuVariant === 'flyout' ? expandHandler : undefined}\n href={href}\n mode={mode}\n isParentItem={!!items}\n aria-selected={role !== 'menuitem' ? isItemSelected : undefined}\n isChecked={isItemSelected}\n selectableParent={selectableParent}\n >\n {href && !selectionMode ? (\n <BareButton href={href} tabIndex='-1'>\n {summaryItem}\n </BareButton>\n ) : (\n summaryItem\n )}\n </Flex>\n );\n};\n\nexport default withTestIds(MenuItem, getMenuItemTestIds);\n"]}

package/lib/components/Modal/MinimizedModal.js CHANGED Viewed

@@ -35,7 +35,7 @@ const StyledMinimizedModal = styled(BareRoleButton)(({ theme: { base } }) => {
       box-shadow: ${base.shadow.high};
     }
-    &:focus {
+    &:focus-visible {
       outline: none;
       box-shadow: ${base.shadow.focus};
     }

package/lib/components/Modal/MinimizedModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MinimizedModal.js","sourceRoot":"","sources":["../../../src/components/Modal/MinimizedModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef } from 'react';\nimport type { FunctionComponent, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport BareRoleButton from '../Button/BareRoleButton';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport * as undockIcon from '../Icon/icons/undock.icon';\nimport { defaultThemeProp } from '../../theme';\nimport type { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport { useElement, useI18n, useModalContext, useTheme } from '../../hooks';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\n\nimport type { ModalProps } from './Modal.types';\nimport useModalMove from './useModalMove';\nimport { StyledMinimizedLabel } from './Modal.styles';\n\nregisterIcon(timesIcon, minusIcon, undockIcon);\n\nconst StyledMinimizedModal = styled(BareRoleButton)(({ theme: { base } }) => {\n return css`\n height: 3rem;\n width: fit-content;\n min-width: 30ch;\n max-width: 56ch;\n border-radius: calc(0.5 * ${base['border-radius']}) calc(0.5 * ${base['border-radius']}) 0 0;\n color: ${base.palette['foreground-color']};\n background-color: ${base.palette['primary-background']};\n box-shadow: ${base.shadow.low};\n padding: ${base.spacing};\n cursor: pointer;\n user-select: none;\n pointer-events: auto;\n transition: box-shadow ${base.animation.speed} ${base.animation.timing.ease};\n\n &:hover {\n box-shadow: ${base.shadow.high};\n }\n\n &:focus {\n outline: none;\n box-shadow: ${base.shadow.focus};\n }\n\n ${StyledMinimizedLabel} {\n margin-inline-end: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &[data-moveable] {\n position: absolute;\n }\n `;\n});\n\nStyledMinimizedModal.defaultProps = defaultThemeProp;\n\nconst MinimizedModal: FunctionComponent<ModalProps & ForwardProps> = ({\n heading,\n onBeforeClose,\n onAfterClose,\n onRequestDismiss,\n onRequestActivate,\n onRequestMinimize,\n onRequestMaximize,\n onRequestDock,\n icon,\n ...restProps\n}) => {\n const { dismissible, dockable, moveable, maximizable, dock, maximize, activate, unmount } =\n useModalContext();\n\n const [titleTarget, setTitleTarget] = useElement();\n\n const t = useI18n();\n\n // Note StyledMinimizedModal is a div but has the role of button\n const ref = useRef<HTMLDivElement>(null);\n\n const modalMoveReturnRef = useModalMove({\n enabled: !!moveable,\n moveRef: ref\n });\n const theme = useTheme();\n\n return (\n <Flex\n {...restProps}\n container={{ alignItems: 'center', justify: 'between', pad: [undefined, 2], gap: 1 }}\n item={{ shrink: 0 }}\n as={StyledMinimizedModal}\n aria-label={`${t('activate')} ${heading}`}\n onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {\n // Prevent issues when auto focusing on close button.\n if ((e.key === 'Space' \|\| e.key === 'Enter') && e.target === e.currentTarget)\n e.preventDefault();\n }}\n onClick={() => {\n if (modalMoveReturnRef.current?.mouseMoved) return;\n if (onRequestActivate?.() !== false && !dockable) activate();\n if (onRequestDock?.() !== false && dockable) dock();\n }}\n data-app-region\n data-moveable={moveable ? '' : undefined}\n ref={ref}\n >\n {icon && (\n <Icon\n name={icon}\n shape='square'\n size='m'\n background={theme.base.palette['app-background']}\n />\n )}\n <Text as={StyledMinimizedLabel} ref={setTitleTarget}>\n {heading}\n </Text>\n\n {(maximizable \|\| dockable \|\| dismissible) && (\n <Flex container>\n {maximizable && (\n <Button\n label={t('maximize')}\n aria-label={t('modal_maximize')}\n variant='simple'\n onClick={() => {\n if (onRequestMaximize?.() !== false) {\n maximize();\n }\n }}\n icon\n >\n <Icon name='undock' />\n </Button>\n )}\n\n {dockable && (\n <Button\n label={t('dock')}\n aria-label={t('modal_dock')}\n variant='simple'\n onClick={() => {\n if (onRequestDock?.() !== false) {\n dock();\n }\n }}\n icon\n >\n <Icon name='dock' />\n </Button>\n )}\n\n {dismissible && (\n <Button\n label={t('close')}\n aria-label={t('modal_close')}\n variant='simple'\n onClick={() => {\n if (onRequestDismiss?.() !== false) {\n onBeforeClose?.();\n unmount();\n onAfterClose?.();\n }\n }}\n icon\n >\n <Icon name='times' />\n </Button>\n )}\n </Flex>\n )}\n\n {titleTarget && (\n <Tooltip target={titleTarget} smart describeTarget={false}>\n {heading}\n </Tooltip>\n )}\n </Flex>\n );\n};\n\nexport default MinimizedModal;\n"]}
1	+ {"version":3,"file":"MinimizedModal.js","sourceRoot":"","sources":["../../../src/components/Modal/MinimizedModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef } from 'react';\nimport type { FunctionComponent, KeyboardEvent } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport BareRoleButton from '../Button/BareRoleButton';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport * as minusIcon from '../Icon/icons/minus.icon';\nimport * as undockIcon from '../Icon/icons/undock.icon';\nimport { defaultThemeProp } from '../../theme';\nimport type { ForwardProps } from '../../types';\nimport Flex from '../Flex';\nimport { useElement, useI18n, useModalContext, useTheme } from '../../hooks';\nimport Text from '../Text';\nimport Tooltip from '../Tooltip';\n\nimport type { ModalProps } from './Modal.types';\nimport useModalMove from './useModalMove';\nimport { StyledMinimizedLabel } from './Modal.styles';\n\nregisterIcon(timesIcon, minusIcon, undockIcon);\n\nconst StyledMinimizedModal = styled(BareRoleButton)(({ theme: { base } }) => {\n return css`\n height: 3rem;\n width: fit-content;\n min-width: 30ch;\n max-width: 56ch;\n border-radius: calc(0.5 * ${base['border-radius']}) calc(0.5 * ${base['border-radius']}) 0 0;\n color: ${base.palette['foreground-color']};\n background-color: ${base.palette['primary-background']};\n box-shadow: ${base.shadow.low};\n padding: ${base.spacing};\n cursor: pointer;\n user-select: none;\n pointer-events: auto;\n transition: box-shadow ${base.animation.speed} ${base.animation.timing.ease};\n\n &:hover {\n box-shadow: ${base.shadow.high};\n }\n\n &:focus-visible {\n outline: none;\n box-shadow: ${base.shadow.focus};\n }\n\n ${StyledMinimizedLabel} {\n margin-inline-end: auto;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n &[data-moveable] {\n position: absolute;\n }\n `;\n});\n\nStyledMinimizedModal.defaultProps = defaultThemeProp;\n\nconst MinimizedModal: FunctionComponent<ModalProps & ForwardProps> = ({\n heading,\n onBeforeClose,\n onAfterClose,\n onRequestDismiss,\n onRequestActivate,\n onRequestMinimize,\n onRequestMaximize,\n onRequestDock,\n icon,\n ...restProps\n}) => {\n const { dismissible, dockable, moveable, maximizable, dock, maximize, activate, unmount } =\n useModalContext();\n\n const [titleTarget, setTitleTarget] = useElement();\n\n const t = useI18n();\n\n // Note StyledMinimizedModal is a div but has the role of button\n const ref = useRef<HTMLDivElement>(null);\n\n const modalMoveReturnRef = useModalMove({\n enabled: !!moveable,\n moveRef: ref\n });\n const theme = useTheme();\n\n return (\n <Flex\n {...restProps}\n container={{ alignItems: 'center', justify: 'between', pad: [undefined, 2], gap: 1 }}\n item={{ shrink: 0 }}\n as={StyledMinimizedModal}\n aria-label={`${t('activate')} ${heading}`}\n onKeyDown={(e: KeyboardEvent<HTMLDivElement>) => {\n // Prevent issues when auto focusing on close button.\n if ((e.key === 'Space' \|\| e.key === 'Enter') && e.target === e.currentTarget)\n e.preventDefault();\n }}\n onClick={() => {\n if (modalMoveReturnRef.current?.mouseMoved) return;\n if (onRequestActivate?.() !== false && !dockable) activate();\n if (onRequestDock?.() !== false && dockable) dock();\n }}\n data-app-region\n data-moveable={moveable ? '' : undefined}\n ref={ref}\n >\n {icon && (\n <Icon\n name={icon}\n shape='square'\n size='m'\n background={theme.base.palette['app-background']}\n />\n )}\n <Text as={StyledMinimizedLabel} ref={setTitleTarget}>\n {heading}\n </Text>\n\n {(maximizable \|\| dockable \|\| dismissible) && (\n <Flex container>\n {maximizable && (\n <Button\n label={t('maximize')}\n aria-label={t('modal_maximize')}\n variant='simple'\n onClick={() => {\n if (onRequestMaximize?.() !== false) {\n maximize();\n }\n }}\n icon\n >\n <Icon name='undock' />\n </Button>\n )}\n\n {dockable && (\n <Button\n label={t('dock')}\n aria-label={t('modal_dock')}\n variant='simple'\n onClick={() => {\n if (onRequestDock?.() !== false) {\n dock();\n }\n }}\n icon\n >\n <Icon name='dock' />\n </Button>\n )}\n\n {dismissible && (\n <Button\n label={t('close')}\n aria-label={t('modal_close')}\n variant='simple'\n onClick={() => {\n if (onRequestDismiss?.() !== false) {\n onBeforeClose?.();\n unmount();\n onAfterClose?.();\n }\n }}\n icon\n >\n <Icon name='times' />\n </Button>\n )}\n </Flex>\n )}\n\n {titleTarget && (\n <Tooltip target={titleTarget} smart describeTarget={false}>\n {heading}\n </Tooltip>\n )}\n </Flex>\n );\n};\n\nexport default MinimizedModal;\n"]}

package/lib/components/MultiStepForm/FormProgress.styles.js CHANGED Viewed

@@ -127,7 +127,7 @@ export const StepMarker = styled(BareButton)(({ current, depth, completed, click
       transition: all calc(2 * ${animationSpeed}) ${animationTiming};
     }
-    &:focus::before {
+    &:focus-visible::before {
       box-shadow: ${focusShadow};
       @media (forced-colors: active) {

package/lib/components/MultiStepForm/FormProgress.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormProgress.styles.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/FormProgress.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { size } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport BareButton from '../Button/BareButton';\nimport Popover from '../Popover';\nimport { StyledText } from '../Text';\nimport { calculateFontSize, type FontSize } from '../../styles';\nimport { useDirection } from '../../hooks';\nimport Flex from '../Flex';\nimport { ellipsisOverflow } from '../../styles/mixins';\n\nimport type { Step } from './MultiStepForm.types';\n\n/** Min width of each step item including labels in ch units /\nexport const stepItemMinWidth = 15;\n\n/* Min width of step marker without labels in ch units /\nexport const stepMarkerMinWidth = 3;\n\nexport const CurrentStepPopover = styled(Popover)`\n max-width: 100%;\n background-color: transparent;\n z-index: 0;\n box-shadow: none;\n animation: none;\n\n & > ${StyledText} {\n ${ellipsisOverflow}\n }\n`;\n\nconst calculateStepMarkerSizes = (fontSize: string, fontScale: string \| number) => {\n const { m: stepMarkerSize } = calculateFontSize(fontSize, fontScale);\n return {\n stepMarkerSize,\n smallStepMarkerSize: `calc(${stepMarkerSize} / 1.5)`,\n bigStepMarkerSize: `calc(${stepMarkerSize} 1.5)`\n };\n};\n\nconst calculateBarTopPadding = (\n fontSize: string,\n fontScale: string \| number,\n lineHeight: string\n) => {\n const { bigStepMarkerSize } = calculateStepMarkerSizes(fontSize, fontScale);\n return {\n // assuming the step progress always contains current step marker which is the biggest one,\n // the top padding of the bar should be half of the big step marker size minus line height of the bar\n // to be vertically centered\n stepBarTopPadding: `calc((${bigStepMarkerSize} / 2) - (${lineHeight} / 2))`\n };\n};\n\nexport const StyledBar = styled.div<{ shifted?: boolean }>(({ shifted, theme }) => {\n const {\n base: { 'font-size': fontSize, 'font-scale': fontScale },\n components: {\n 'form-control': { 'border-color': borderColor }\n }\n } = theme;\n\n const lineHeight = '0.125rem';\n const { stepBarTopPadding } = calculateBarTopPadding(fontSize, fontScale, lineHeight);\n\n return css`\n position: absolute;\n ${shifted && `inset-block-start: ${stepBarTopPadding};`}\n width: 100%;\n height: ${lineHeight};\n background: ${borderColor};\n\n @media (forced-colors: active) {\n background: CanvasText;\n }\n `;\n});\n\nStyledBar.defaultProps = defaultThemeProp;\n\nexport const StyledFill = styled.div(({ theme }) => {\n const {\n base: {\n animation: {\n speed: animationSpeed,\n timing: { ease: animationTiming }\n },\n palette: { interactive }\n }\n } = theme;\n\n const { ltr } = useDirection();\n\n const markedLineThicknessFactor = 2;\n\n return css`\n position: absolute;\n width: 100%;\n height: calc(100% * ${markedLineThicknessFactor});\n\n /* top position based on line thickness factor to keep the fill centered /\n top: calc(-50% (${markedLineThicknessFactor} - 1));\n background: ${interactive};\n transition: all calc(2 * ${animationSpeed}) ${animationTiming};\n transform: scaleX(var(--fillScale));\n transform-origin: ${ltr ? 0 : '100%'} 0;\n\n @media (forced-colors: active) {\n background: Highlight;\n }\n `;\n});\n\nStyledFill.defaultProps = defaultThemeProp;\n\nexport const StyledFormProgress = styled(Flex)<{ showStepNames?: boolean }>(({\n showStepNames,\n theme\n}) => {\n const {\n base: { spacing, 'font-size': fontSize, 'font-scale': fontScale },\n components: {\n text: {\n h4: { 'font-size': h3fontSize }\n }\n }\n } = theme;\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n position: relative;\n ${!showStepNames &&\n `padding-block-end: calc(${spacing} + ${fontSizes[h3fontSize as FontSize]} * 1.35);`}\n `;\n});\n\nStyledFormProgress.defaultProps = defaultThemeProp;\n\nexport const StepMarker = styled(BareButton)<{\n current: boolean;\n depth: Step['depth'];\n completed?: Step['completed'];\n clickable?: boolean;\n}>(({ current, depth, completed, clickable, theme }) => {\n const {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n animation: {\n speed: animationSpeed,\n timing: { ease: animationTiming }\n },\n palette: { interactive, 'primary-background': primaryBackground },\n shadow: { focus: focusShadow },\n 'hit-area': { 'mouse-min': buttonSize, 'finger-min': touchButtonSize }\n },\n components: {\n 'form-control': { 'border-color': borderColor, 'border-width': borderWidth }\n }\n } = theme;\n\n const { stepMarkerSize, smallStepMarkerSize, bigStepMarkerSize } = calculateStepMarkerSizes(\n fontSize,\n fontScale\n );\n\n // Determine the actual size for this marker based on its state\n let markerSize = stepMarkerSize;\n if (current) {\n markerSize = bigStepMarkerSize;\n } else if (depth === 1) {\n markerSize = smallStepMarkerSize;\n }\n\n return css`\n position: relative;\n z-index: 1;\n\n /* Fixed container size based on the biggest marker to prevent layout shifts /\n ${size(bigStepMarkerSize)}\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n\n ${clickable\n ? css`\n border-color: ${interactive};\n `\n : css`\n cursor: default;\n `}\n\n &::before {\n content: '';\n ${size(markerSize)}\n position: absolute;\n border-radius: 100%;\n transition: all calc(2 ${animationSpeed}) ${animationTiming};\n }\n\n &:focus::before {\n box-shadow: ${focusShadow};\n\n @media (forced-colors: active) {\n outline: 0.125rem solid Highlight;\n outline-offset: 0.125rem;\n }\n }\n\n ${!current &&\n css`\n border-color: transparent;\n background: transparent;\n\n &::before {\n background: ${primaryBackground};\n border: calc(2 * ${borderWidth}) solid ${clickable ? interactive : borderColor};\n\n ${completed &&\n css`\n background: ${interactive};\n border-color: ${interactive};\n `}\n\n @media (forced-colors: active) {\n background: ${completed ? 'Highlight' : 'Canvas'};\n border-color: ${clickable ? 'Highlight' : 'CanvasText'};\n }\n }\n `}\n\n ${current &&\n css`\n &::before {\n background: ${interactive};\n\n @media (forced-colors: active) {\n background: Highlight;\n }\n }\n `}\n\n ::after {\n content: '';\n position: absolute;\n ${size(buttonSize)}\n inset-block-start: ${`calc((${buttonSize} - ${bigStepMarkerSize}) / -2) `};\n inset-inline-start: ${`calc((${buttonSize} - ${bigStepMarkerSize}) / -2) `};\n\n @media (pointer: coarse) {\n inset-block-start: ${`calc((${touchButtonSize} - ${bigStepMarkerSize}) / -2) `};\n inset-inline-start: ${`calc((${touchButtonSize} - ${bigStepMarkerSize}) / -2) `};\n ${size(touchButtonSize)}\n }\n }\n `;\n});\n\nStepMarker.defaultProps = defaultThemeProp;\n\nexport const StyleHorizontalStepMarkers = styled.ol<{ showStepNames?: boolean }>(\n ({ showStepNames, theme }) => {\n return css`\n list-style-type: none;\n justify-content: space-between;\n\n li {\n display: flex;\n position: relative;\n flex: 1 1 0;\n\n /* min width changes based on whether step names are shown /\n min-width: ${`${showStepNames ? stepItemMinWidth : stepMarkerMinWidth}ch`};\n font-size: small;\n margin-inline: ${theme.base.spacing};\n flex-direction: column;\n align-items: center;\n text-align: center;\n }\n\n li:first-child,\n li:last-child {\n flex: 0.5 1 0;\n / stylelint-disable-next-line unit-allowed-list /\n min-width: ${`${showStepNames ? stepItemMinWidth / 2 : stepMarkerMinWidth / 2}ch`};\n }\n\n li:first-child {\n align-items: flex-start;\n text-align: left;\n margin-inline-start: 0;\n padding-inline-start: 0;\n\n ${StepMarker}::before {\n inset-inline-start: 0;\n }\n }\n\n li:last-child {\n align-items: flex-end;\n text-align: right;\n margin-inline-end: 0;\n padding-inline-end: 0;\n\n ${StepMarker}::before {\n inset-inline-end: 0;\n }\n }\n\n &:has(:focus-visible) {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\n `;\n }\n);\n\nStyleHorizontalStepMarkers.defaultProps = defaultThemeProp;\n\nexport const StyledVerticalStepMarkers = styled.ol`\n list-style-type: none;\n`;\n\nexport const StyledBulletWrapper = styled.div<{\n hasNext: boolean;\n prior: boolean;\n}>(({ theme, hasNext, prior }) => {\n const {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n animation: { speed: animationSpeed },\n palette: { interactive }\n },\n components: {\n 'form-control': { 'border-color': borderColor }\n }\n } = theme;\n\n const baseLineWidth = '0.125rem';\n const lineWidth = prior ? `calc(2 ${baseLineWidth})` : baseLineWidth;\n\n const { bigStepMarkerSize } = calculateStepMarkerSizes(fontSize, fontScale);\n\n return css`\n position: relative;\n min-width: 2rem;\n\n ${hasNext &&\n css`\n &::after {\n content: '';\n position: absolute;\n\n /* Center the line horizontally and vertically relative to the step marker /\n inset-block-start: calc(${bigStepMarkerSize});\n inset-inline-start: calc(50% - (${lineWidth} / 2));\n width: ${lineWidth};\n height: 100%;\n background: ${prior ? interactive : borderColor};\n transition: background calc(2 ${animationSpeed});\n\n @media (forced-colors: active) {\n background: ${prior ? 'Highlight' : 'CanvasText'};\n }\n }\n `}\n `;\n});\n\nStyledBulletWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledStepText = styled.div(({ theme }) => {\n return css`\n padding-block: ${theme.base.spacing};\n overflow-wrap: break-word;\n `;\n});\n\nStyledStepText.defaultProps = defaultThemeProp;\n\nexport const StyledHorizontalStepText = styled.div(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n padding-block: ${theme.base.spacing};\n overflow-wrap: break-word;\n min-width: inherit;\n font-size: ${fontSize.xxs};\n text-align: inherit;\n `;\n});\n\nStyledHorizontalStepText.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"FormProgress.styles.js","sourceRoot":"","sources":["../../../src/components/MultiStepForm/FormProgress.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { size } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport BareButton from '../Button/BareButton';\nimport Popover from '../Popover';\nimport { StyledText } from '../Text';\nimport { calculateFontSize, type FontSize } from '../../styles';\nimport { useDirection } from '../../hooks';\nimport Flex from '../Flex';\nimport { ellipsisOverflow } from '../../styles/mixins';\n\nimport type { Step } from './MultiStepForm.types';\n\n/** Min width of each step item including labels in ch units /\nexport const stepItemMinWidth = 15;\n\n/* Min width of step marker without labels in ch units /\nexport const stepMarkerMinWidth = 3;\n\nexport const CurrentStepPopover = styled(Popover)`\n max-width: 100%;\n background-color: transparent;\n z-index: 0;\n box-shadow: none;\n animation: none;\n\n & > ${StyledText} {\n ${ellipsisOverflow}\n }\n`;\n\nconst calculateStepMarkerSizes = (fontSize: string, fontScale: string \| number) => {\n const { m: stepMarkerSize } = calculateFontSize(fontSize, fontScale);\n return {\n stepMarkerSize,\n smallStepMarkerSize: `calc(${stepMarkerSize} / 1.5)`,\n bigStepMarkerSize: `calc(${stepMarkerSize} 1.5)`\n };\n};\n\nconst calculateBarTopPadding = (\n fontSize: string,\n fontScale: string \| number,\n lineHeight: string\n) => {\n const { bigStepMarkerSize } = calculateStepMarkerSizes(fontSize, fontScale);\n return {\n // assuming the step progress always contains current step marker which is the biggest one,\n // the top padding of the bar should be half of the big step marker size minus line height of the bar\n // to be vertically centered\n stepBarTopPadding: `calc((${bigStepMarkerSize} / 2) - (${lineHeight} / 2))`\n };\n};\n\nexport const StyledBar = styled.div<{ shifted?: boolean }>(({ shifted, theme }) => {\n const {\n base: { 'font-size': fontSize, 'font-scale': fontScale },\n components: {\n 'form-control': { 'border-color': borderColor }\n }\n } = theme;\n\n const lineHeight = '0.125rem';\n const { stepBarTopPadding } = calculateBarTopPadding(fontSize, fontScale, lineHeight);\n\n return css`\n position: absolute;\n ${shifted && `inset-block-start: ${stepBarTopPadding};`}\n width: 100%;\n height: ${lineHeight};\n background: ${borderColor};\n\n @media (forced-colors: active) {\n background: CanvasText;\n }\n `;\n});\n\nStyledBar.defaultProps = defaultThemeProp;\n\nexport const StyledFill = styled.div(({ theme }) => {\n const {\n base: {\n animation: {\n speed: animationSpeed,\n timing: { ease: animationTiming }\n },\n palette: { interactive }\n }\n } = theme;\n\n const { ltr } = useDirection();\n\n const markedLineThicknessFactor = 2;\n\n return css`\n position: absolute;\n width: 100%;\n height: calc(100% * ${markedLineThicknessFactor});\n\n /* top position based on line thickness factor to keep the fill centered /\n top: calc(-50% (${markedLineThicknessFactor} - 1));\n background: ${interactive};\n transition: all calc(2 * ${animationSpeed}) ${animationTiming};\n transform: scaleX(var(--fillScale));\n transform-origin: ${ltr ? 0 : '100%'} 0;\n\n @media (forced-colors: active) {\n background: Highlight;\n }\n `;\n});\n\nStyledFill.defaultProps = defaultThemeProp;\n\nexport const StyledFormProgress = styled(Flex)<{ showStepNames?: boolean }>(({\n showStepNames,\n theme\n}) => {\n const {\n base: { spacing, 'font-size': fontSize, 'font-scale': fontScale },\n components: {\n text: {\n h4: { 'font-size': h3fontSize }\n }\n }\n } = theme;\n const fontSizes = calculateFontSize(fontSize, fontScale);\n\n return css`\n position: relative;\n ${!showStepNames &&\n `padding-block-end: calc(${spacing} + ${fontSizes[h3fontSize as FontSize]} * 1.35);`}\n `;\n});\n\nStyledFormProgress.defaultProps = defaultThemeProp;\n\nexport const StepMarker = styled(BareButton)<{\n current: boolean;\n depth: Step['depth'];\n completed?: Step['completed'];\n clickable?: boolean;\n}>(({ current, depth, completed, clickable, theme }) => {\n const {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n animation: {\n speed: animationSpeed,\n timing: { ease: animationTiming }\n },\n palette: { interactive, 'primary-background': primaryBackground },\n shadow: { focus: focusShadow },\n 'hit-area': { 'mouse-min': buttonSize, 'finger-min': touchButtonSize }\n },\n components: {\n 'form-control': { 'border-color': borderColor, 'border-width': borderWidth }\n }\n } = theme;\n\n const { stepMarkerSize, smallStepMarkerSize, bigStepMarkerSize } = calculateStepMarkerSizes(\n fontSize,\n fontScale\n );\n\n // Determine the actual size for this marker based on its state\n let markerSize = stepMarkerSize;\n if (current) {\n markerSize = bigStepMarkerSize;\n } else if (depth === 1) {\n markerSize = smallStepMarkerSize;\n }\n\n return css`\n position: relative;\n z-index: 1;\n\n /* Fixed container size based on the biggest marker to prevent layout shifts /\n ${size(bigStepMarkerSize)}\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n\n ${clickable\n ? css`\n border-color: ${interactive};\n `\n : css`\n cursor: default;\n `}\n\n &::before {\n content: '';\n ${size(markerSize)}\n position: absolute;\n border-radius: 100%;\n transition: all calc(2 ${animationSpeed}) ${animationTiming};\n }\n\n &:focus-visible::before {\n box-shadow: ${focusShadow};\n\n @media (forced-colors: active) {\n outline: 0.125rem solid Highlight;\n outline-offset: 0.125rem;\n }\n }\n\n ${!current &&\n css`\n border-color: transparent;\n background: transparent;\n\n &::before {\n background: ${primaryBackground};\n border: calc(2 * ${borderWidth}) solid ${clickable ? interactive : borderColor};\n\n ${completed &&\n css`\n background: ${interactive};\n border-color: ${interactive};\n `}\n\n @media (forced-colors: active) {\n background: ${completed ? 'Highlight' : 'Canvas'};\n border-color: ${clickable ? 'Highlight' : 'CanvasText'};\n }\n }\n `}\n\n ${current &&\n css`\n &::before {\n background: ${interactive};\n\n @media (forced-colors: active) {\n background: Highlight;\n }\n }\n `}\n\n ::after {\n content: '';\n position: absolute;\n ${size(buttonSize)}\n inset-block-start: ${`calc((${buttonSize} - ${bigStepMarkerSize}) / -2) `};\n inset-inline-start: ${`calc((${buttonSize} - ${bigStepMarkerSize}) / -2) `};\n\n @media (pointer: coarse) {\n inset-block-start: ${`calc((${touchButtonSize} - ${bigStepMarkerSize}) / -2) `};\n inset-inline-start: ${`calc((${touchButtonSize} - ${bigStepMarkerSize}) / -2) `};\n ${size(touchButtonSize)}\n }\n }\n `;\n});\n\nStepMarker.defaultProps = defaultThemeProp;\n\nexport const StyleHorizontalStepMarkers = styled.ol<{ showStepNames?: boolean }>(\n ({ showStepNames, theme }) => {\n return css`\n list-style-type: none;\n justify-content: space-between;\n\n li {\n display: flex;\n position: relative;\n flex: 1 1 0;\n\n /* min width changes based on whether step names are shown /\n min-width: ${`${showStepNames ? stepItemMinWidth : stepMarkerMinWidth}ch`};\n font-size: small;\n margin-inline: ${theme.base.spacing};\n flex-direction: column;\n align-items: center;\n text-align: center;\n }\n\n li:first-child,\n li:last-child {\n flex: 0.5 1 0;\n / stylelint-disable-next-line unit-allowed-list /\n min-width: ${`${showStepNames ? stepItemMinWidth / 2 : stepMarkerMinWidth / 2}ch`};\n }\n\n li:first-child {\n align-items: flex-start;\n text-align: left;\n margin-inline-start: 0;\n padding-inline-start: 0;\n\n ${StepMarker}::before {\n inset-inline-start: 0;\n }\n }\n\n li:last-child {\n align-items: flex-end;\n text-align: right;\n margin-inline-end: 0;\n padding-inline-end: 0;\n\n ${StepMarker}::before {\n inset-inline-end: 0;\n }\n }\n\n &:has(:focus-visible) {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\n `;\n }\n);\n\nStyleHorizontalStepMarkers.defaultProps = defaultThemeProp;\n\nexport const StyledVerticalStepMarkers = styled.ol`\n list-style-type: none;\n`;\n\nexport const StyledBulletWrapper = styled.div<{\n hasNext: boolean;\n prior: boolean;\n}>(({ theme, hasNext, prior }) => {\n const {\n base: {\n 'font-size': fontSize,\n 'font-scale': fontScale,\n animation: { speed: animationSpeed },\n palette: { interactive }\n },\n components: {\n 'form-control': { 'border-color': borderColor }\n }\n } = theme;\n\n const baseLineWidth = '0.125rem';\n const lineWidth = prior ? `calc(2 ${baseLineWidth})` : baseLineWidth;\n\n const { bigStepMarkerSize } = calculateStepMarkerSizes(fontSize, fontScale);\n\n return css`\n position: relative;\n min-width: 2rem;\n\n ${hasNext &&\n css`\n &::after {\n content: '';\n position: absolute;\n\n /* Center the line horizontally and vertically relative to the step marker /\n inset-block-start: calc(${bigStepMarkerSize});\n inset-inline-start: calc(50% - (${lineWidth} / 2));\n width: ${lineWidth};\n height: 100%;\n background: ${prior ? interactive : borderColor};\n transition: background calc(2 ${animationSpeed});\n\n @media (forced-colors: active) {\n background: ${prior ? 'Highlight' : 'CanvasText'};\n }\n }\n `}\n `;\n});\n\nStyledBulletWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledStepText = styled.div(({ theme }) => {\n return css`\n padding-block: ${theme.base.spacing};\n overflow-wrap: break-word;\n `;\n});\n\nStyledStepText.defaultProps = defaultThemeProp;\n\nexport const StyledHorizontalStepText = styled.div(({ theme }) => {\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n return css`\n padding-block: ${theme.base.spacing};\n overflow-wrap: break-word;\n min-width: inherit;\n font-size: ${fontSize.xxs};\n text-align: inherit;\n `;\n});\n\nStyledHorizontalStepText.defaultProps = defaultThemeProp;\n"]}

package/lib/components/SearchInput/SearchInput.styles.js CHANGED Viewed

@@ -20,7 +20,7 @@ export const StyledSearchButton = styled(Button)(({ theme: { base: { spacing, 'b
       border-color: ${formControl[':hover']['border-color']};
     }
-    &:focus:enabled {
+    &:focus-visible:enabled {
       box-shadow: ${focusShadow};
     }
   `;
@@ -39,7 +39,7 @@ export const StyledSearchFiltersButton = styled(MenuButton)(({ theme: { base: {
       border-color: ${formControl[':hover']['border-color']};
     }
-    &:focus:enabled {
+    &:focus-visible:enabled {
       box-shadow: ${focusShadow};
     }
   `;
@@ -97,7 +97,7 @@ export const StyledSearchTextInput = styled(Input)(({ theme }) => {
       -webkit-appearance: none;
     }
-    &:focus:not([disabled]) {
+    &:focus-visible:not([disabled]) {
       box-shadow: ${theme.base.shadow['focus-inset']};
       border-color: ${theme.components['form-control']['border-color']};

package/lib/components/SearchInput/SearchInput.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.styles.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport MenuButton from '../MenuButton';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport Button, { StyledButton } from '../Button';\nimport Input from '../Input';\nimport Icon from '../Icon';\n\nexport const StyledSearchButton = styled(Button)(({\n theme: {\n base: {\n spacing,\n 'border-radius': borderRadius,\n shadow: { 'focus-inset': focusShadow }\n },\n components: { 'search-input': searchInput, 'form-control': formControl }\n }\n}) => {\n return css`\n border: ${formControl['border-width']} solid ${formControl['border-color']};\n border-inline-start: unset;\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n border-start-end-radius: calc(${borderRadius} * ${searchInput['border-radius']});\n border-end-end-radius: calc(${borderRadius} * ${searchInput['border-radius']});\n padding-inline: ${spacing} calc(1.25 * ${spacing});\n\n &:hover {\n border-color: ${formControl[':hover']['border-color']};\n }\n\n &:focus:enabled {\n box-shadow: ${focusShadow};\n }\n `;\n});\n\nStyledSearchButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchFiltersButton = styled(MenuButton)(({\n theme: {\n base: {\n 'border-radius': borderRadius,\n shadow: { 'focus-inset': focusShadow }\n },\n components: { 'search-input': searchInput, 'form-control': formControl }\n }\n}) => {\n return css`\n border: ${formControl['border-width']} solid ${formControl['border-color']};\n border-inline-end: unset;\n border-start-start-radius: calc(${borderRadius} * ${searchInput['border-radius']});\n border-end-start-radius: calc(${borderRadius} * ${searchInput['border-radius']});\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n\n &:hover {\n border-color: ${formControl[':hover']['border-color']};\n }\n\n &:focus:enabled {\n box-shadow: ${focusShadow};\n }\n `;\n});\n\nStyledSearchFiltersButton.defaultProps = defaultThemeProp;\n\nexport const StyledClearButton = styled(Button)(({\n theme: {\n base: { 'hit-area': hitArea },\n components: { input }\n }\n}) => {\n return css`\n position: absolute;\n inset-block-start: calc((${input.height} - ${hitArea.compact}) / 2);\n\n && + ${StyledButton} {\n margin-inline-start: 0;\n }\n\n @media (pointer: coarse) {\n inset-block-start: calc((${hitArea['finger-min']} - ${hitArea.compact}) / 2);\n }\n `;\n});\n\nStyledClearButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchIcon = styled(Icon)(({\n theme: {\n base: { 'hit-area': hitArea, palette },\n components: { input }\n }\n}) => {\n const iconColor = tryCatch(() => transparentize(0.3, palette['foreground-color']));\n\n return css`\n position: absolute;\n pointer-events: none;\n color: ${iconColor};\n z-index: 1;\n /* stylelint-disable-next-line unit-allowed-list /\n inset-block-start: calc((${input.height} - max(1.125rem, 14px)) / 2);\n\n @media (pointer: coarse) {\n / stylelint-disable-next-line unit-allowed-list /\n inset-block-start: calc((${hitArea['finger-min']} - max(1.125rem, 14px)) / 2);\n }\n `;\n});\n\nStyledSearchIcon.defaultProps = defaultThemeProp;\n\nexport const StyledSearchTextInput = styled(Input)(({ theme }) => {\n return css`\n flex: 1;\n background-color: transparent;\n border-radius: inherit;\n height: 100%;\n min-height: 100%;\n\n &::-ms-clear {\n display: none;\n }\n\n &::-webkit-search-cancel-button {\n display: none;\n }\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &:focus:not([disabled]) {\n box-shadow: ${theme.base.shadow['focus-inset']};\n border-color: ${theme.components['form-control']['border-color']};\n\n :hover {\n border-color: ${theme.components['form-control'][':hover']['border-color']};\n }\n }\n `;\n});\n\nStyledSearchTextInput.defaultProps = defaultThemeProp;\n\nexport const StyledSearchInput = styled.div<{ hasFilters: boolean; showSubmit: boolean }>(\n ({ hasFilters, showSubmit, theme }) => {\n const borderRadius = `calc(${theme.components['search-input']['border-radius']} ${theme.base['border-radius']})`;\n\n return css`\n position: relative;\n background: ${theme.components['form-control']['background-color']};\n min-height: ${theme.components.input.height};\n height: ${theme.components.input.height};\n border-radius: ${borderRadius};\n\n @media (pointer: coarse) {\n min-height: ${theme.base['hit-area']['finger-min']};\n min-width: ${theme.base['hit-area']['finger-min']};\n }\n --button-padding-inner: ${theme.base.spacing};\n --button-padding-outer: calc(${theme.base.spacing} * 1.25);\n /* stylelint-disable-next-line unit-allowed-list /\n --icon-size: max(1.125rem, 14px);\n --min-button-size: ${theme.base['hit-area']['mouse-min']};\n --search-button-size: max(\n var(--button-padding-inner) + var(--icon-size) + var(--button-padding-outer) +\n ${theme.components.button['border-width']},\n var(--min-button-size)\n );\n\n @media (pointer: coarse) {\n --min-button-size: ${theme.base['hit-area']['finger-min']};\n }\n\n ${showSubmit\n ? css`\n / stylelint-disable length-zero-no-unit /\n --search-icon-start-size: 0rem;\n --search-icon-end-size: 0rem;\n --search-button-end-size: var(--search-button-size);\n / stylelint-enable length-zero-no-unit /\n `\n : css`\n ${hasFilters\n ? css`\n / stylelint-disable length-zero-no-unit /\n --search-icon-start-size: 0rem;\n --search-icon-end-size: calc(\n var(--search-button-size) - var(--button-padding-inner)\n );\n --search-button-end-size: 0rem;\n / stylelint-enable length-zero-no-unit /\n `\n : css`\n / stylelint-disable length-zero-no-unit /\n --search-icon-start-size: calc(\n var(--search-button-size) - var(--button-padding-inner)\n );\n --search-icon-end-size: 0rem;\n --search-button-end-size: 0rem;\n / stylelint-enable length-zero-no-unit /\n `}\n `}\n ${StyledSearchTextInput} {\n ${showSubmit && !hasFilters\n ? css`\n padding-inline-start: max(\n ${theme.components.input.padding},\n calc(${theme.base.spacing} 1.5)\n );\n `\n : css`\n padding-inline-start: calc(\n ${theme.components.input.padding} + var(--search-icon-start-size)\n );\n `}\n padding-inline-end: calc(\n ${theme.components.input.padding} + var(--clear-button-size-plus-gap) +\n var(--search-icon-end-size)\n );\n --clear-button-size-plus-gap: calc(\n max(${theme.base['hit-area'].compact}, ${theme.base['hit-area']['compact-min']}) +\n ${theme.components.input.padding}\n );\n\n &[value=''] {\n /* stylelint-disable-next-line length-zero-no-unit */\n --clear-button-size-plus-gap: 0rem;\n }\n\n ${showSubmit &&\n css`\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n `}\n\n ${hasFilters &&\n css`\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n `}\n }\n\n ${StyledClearButton} {\n inset-inline-end: calc(\n ${theme.components.input.padding} +\n max(var(--search-icon-end-size), var(--search-button-end-size))\n );\n }\n\n ${StyledSearchIcon} {\n --inset: calc(\n max(var(--button-padding-outer), calc((var(--min-button-size) - var(--icon-size)) / 2)) +\n ${theme.components.button['border-width']}\n );\n\n ${hasFilters\n ? css`\n inset-inline-end: var(--inset);\n `\n : css`\n inset-inline-start: var(--inset);\n `}\n }\n `;\n }\n);\n\nStyledSearchInput.defaultProps = defaultThemeProp;\n\nexport const StyledSearchMenu = styled.div`\n header {\n border-bottom: none;\n }\n`;\n\nexport const StyledSearchResultsContainer = styled.div`\n padding-top: ${props => props.theme.base.spacing};\n`;\n\nStyledSearchResultsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFiltersPopover = styled.div``;\n\nexport const StyledResultsPopover = styled.div``;\n"]}
1	+ {"version":3,"file":"SearchInput.styles.js","sourceRoot":"","sources":["../../../src/components/SearchInput/SearchInput.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { transparentize } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport MenuButton from '../MenuButton';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport Button, { StyledButton } from '../Button';\nimport Input from '../Input';\nimport Icon from '../Icon';\n\nexport const StyledSearchButton = styled(Button)(({\n theme: {\n base: {\n spacing,\n 'border-radius': borderRadius,\n shadow: { 'focus-inset': focusShadow }\n },\n components: { 'search-input': searchInput, 'form-control': formControl }\n }\n}) => {\n return css`\n border: ${formControl['border-width']} solid ${formControl['border-color']};\n border-inline-start: unset;\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n border-start-end-radius: calc(${borderRadius} * ${searchInput['border-radius']});\n border-end-end-radius: calc(${borderRadius} * ${searchInput['border-radius']});\n padding-inline: ${spacing} calc(1.25 * ${spacing});\n\n &:hover {\n border-color: ${formControl[':hover']['border-color']};\n }\n\n &:focus-visible:enabled {\n box-shadow: ${focusShadow};\n }\n `;\n});\n\nStyledSearchButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchFiltersButton = styled(MenuButton)(({\n theme: {\n base: {\n 'border-radius': borderRadius,\n shadow: { 'focus-inset': focusShadow }\n },\n components: { 'search-input': searchInput, 'form-control': formControl }\n }\n}) => {\n return css`\n border: ${formControl['border-width']} solid ${formControl['border-color']};\n border-inline-end: unset;\n border-start-start-radius: calc(${borderRadius} * ${searchInput['border-radius']});\n border-end-start-radius: calc(${borderRadius} * ${searchInput['border-radius']});\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n\n &:hover {\n border-color: ${formControl[':hover']['border-color']};\n }\n\n &:focus-visible:enabled {\n box-shadow: ${focusShadow};\n }\n `;\n});\n\nStyledSearchFiltersButton.defaultProps = defaultThemeProp;\n\nexport const StyledClearButton = styled(Button)(({\n theme: {\n base: { 'hit-area': hitArea },\n components: { input }\n }\n}) => {\n return css`\n position: absolute;\n inset-block-start: calc((${input.height} - ${hitArea.compact}) / 2);\n\n && + ${StyledButton} {\n margin-inline-start: 0;\n }\n\n @media (pointer: coarse) {\n inset-block-start: calc((${hitArea['finger-min']} - ${hitArea.compact}) / 2);\n }\n `;\n});\n\nStyledClearButton.defaultProps = defaultThemeProp;\n\nexport const StyledSearchIcon = styled(Icon)(({\n theme: {\n base: { 'hit-area': hitArea, palette },\n components: { input }\n }\n}) => {\n const iconColor = tryCatch(() => transparentize(0.3, palette['foreground-color']));\n\n return css`\n position: absolute;\n pointer-events: none;\n color: ${iconColor};\n z-index: 1;\n /* stylelint-disable-next-line unit-allowed-list /\n inset-block-start: calc((${input.height} - max(1.125rem, 14px)) / 2);\n\n @media (pointer: coarse) {\n / stylelint-disable-next-line unit-allowed-list /\n inset-block-start: calc((${hitArea['finger-min']} - max(1.125rem, 14px)) / 2);\n }\n `;\n});\n\nStyledSearchIcon.defaultProps = defaultThemeProp;\n\nexport const StyledSearchTextInput = styled(Input)(({ theme }) => {\n return css`\n flex: 1;\n background-color: transparent;\n border-radius: inherit;\n height: 100%;\n min-height: 100%;\n\n &::-ms-clear {\n display: none;\n }\n\n &::-webkit-search-cancel-button {\n display: none;\n }\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &:focus-visible:not([disabled]) {\n box-shadow: ${theme.base.shadow['focus-inset']};\n border-color: ${theme.components['form-control']['border-color']};\n\n :hover {\n border-color: ${theme.components['form-control'][':hover']['border-color']};\n }\n }\n `;\n});\n\nStyledSearchTextInput.defaultProps = defaultThemeProp;\n\nexport const StyledSearchInput = styled.div<{ hasFilters: boolean; showSubmit: boolean }>(\n ({ hasFilters, showSubmit, theme }) => {\n const borderRadius = `calc(${theme.components['search-input']['border-radius']} ${theme.base['border-radius']})`;\n\n return css`\n position: relative;\n background: ${theme.components['form-control']['background-color']};\n min-height: ${theme.components.input.height};\n height: ${theme.components.input.height};\n border-radius: ${borderRadius};\n\n @media (pointer: coarse) {\n min-height: ${theme.base['hit-area']['finger-min']};\n min-width: ${theme.base['hit-area']['finger-min']};\n }\n --button-padding-inner: ${theme.base.spacing};\n --button-padding-outer: calc(${theme.base.spacing} * 1.25);\n /* stylelint-disable-next-line unit-allowed-list /\n --icon-size: max(1.125rem, 14px);\n --min-button-size: ${theme.base['hit-area']['mouse-min']};\n --search-button-size: max(\n var(--button-padding-inner) + var(--icon-size) + var(--button-padding-outer) +\n ${theme.components.button['border-width']},\n var(--min-button-size)\n );\n\n @media (pointer: coarse) {\n --min-button-size: ${theme.base['hit-area']['finger-min']};\n }\n\n ${showSubmit\n ? css`\n / stylelint-disable length-zero-no-unit /\n --search-icon-start-size: 0rem;\n --search-icon-end-size: 0rem;\n --search-button-end-size: var(--search-button-size);\n / stylelint-enable length-zero-no-unit /\n `\n : css`\n ${hasFilters\n ? css`\n / stylelint-disable length-zero-no-unit /\n --search-icon-start-size: 0rem;\n --search-icon-end-size: calc(\n var(--search-button-size) - var(--button-padding-inner)\n );\n --search-button-end-size: 0rem;\n / stylelint-enable length-zero-no-unit /\n `\n : css`\n / stylelint-disable length-zero-no-unit /\n --search-icon-start-size: calc(\n var(--search-button-size) - var(--button-padding-inner)\n );\n --search-icon-end-size: 0rem;\n --search-button-end-size: 0rem;\n / stylelint-enable length-zero-no-unit /\n `}\n `}\n ${StyledSearchTextInput} {\n ${showSubmit && !hasFilters\n ? css`\n padding-inline-start: max(\n ${theme.components.input.padding},\n calc(${theme.base.spacing} 1.5)\n );\n `\n : css`\n padding-inline-start: calc(\n ${theme.components.input.padding} + var(--search-icon-start-size)\n );\n `}\n padding-inline-end: calc(\n ${theme.components.input.padding} + var(--clear-button-size-plus-gap) +\n var(--search-icon-end-size)\n );\n --clear-button-size-plus-gap: calc(\n max(${theme.base['hit-area'].compact}, ${theme.base['hit-area']['compact-min']}) +\n ${theme.components.input.padding}\n );\n\n &[value=''] {\n /* stylelint-disable-next-line length-zero-no-unit */\n --clear-button-size-plus-gap: 0rem;\n }\n\n ${showSubmit &&\n css`\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n `}\n\n ${hasFilters &&\n css`\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n `}\n }\n\n ${StyledClearButton} {\n inset-inline-end: calc(\n ${theme.components.input.padding} +\n max(var(--search-icon-end-size), var(--search-button-end-size))\n );\n }\n\n ${StyledSearchIcon} {\n --inset: calc(\n max(var(--button-padding-outer), calc((var(--min-button-size) - var(--icon-size)) / 2)) +\n ${theme.components.button['border-width']}\n );\n\n ${hasFilters\n ? css`\n inset-inline-end: var(--inset);\n `\n : css`\n inset-inline-start: var(--inset);\n `}\n }\n `;\n }\n);\n\nStyledSearchInput.defaultProps = defaultThemeProp;\n\nexport const StyledSearchMenu = styled.div`\n header {\n border-bottom: none;\n }\n`;\n\nexport const StyledSearchResultsContainer = styled.div`\n padding-top: ${props => props.theme.base.spacing};\n`;\n\nStyledSearchResultsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFiltersPopover = styled.div``;\n\nexport const StyledResultsPopover = styled.div``;\n"]}

package/lib/components/SelectionCard/SelectionCard.styles.js CHANGED Viewed

@@ -26,14 +26,14 @@ export const StyledSelectionCard = styled.div(({ disabled, readOnly, onClick, th
       ${!disabled &&
         css `
-        &:focus {
+        &:focus-visible {
           & ${StyledPseudoRadioCheck} {
             box-shadow: ${shadow};
             border-color: ${focusBorderColor};
           }
         }
-        &:focus,
+        &:focus-visible,
         &:not([data-main-focus]):focus-within {
           box-shadow: ${shadow};
           border-color: transparent;