openproject-primer_view_components 0.17.1 → 0.19.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (86) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +49 -0
  3. data/app/assets/javascripts/app/components/primer/alpha/action_menu/action_menu_element.d.ts +20 -0
  4. data/app/assets/javascripts/app/components/primer/beta/nav_list.d.ts +0 -11
  5. data/app/assets/javascripts/app/components/primer/beta/nav_list_group_element.d.ts +19 -0
  6. data/app/assets/javascripts/app/components/primer/primer.d.ts +1 -0
  7. data/app/assets/javascripts/primer_view_components.js +1 -1
  8. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  9. data/app/assets/styles/primer_view_components.css +1 -1
  10. data/app/assets/styles/primer_view_components.css.map +1 -1
  11. data/app/components/primer/alpha/action_list/item.rb +13 -1
  12. data/app/components/primer/alpha/action_list.css +1 -1
  13. data/app/components/primer/alpha/action_list.css.json +1 -0
  14. data/app/components/primer/alpha/action_list.css.map +1 -1
  15. data/app/components/primer/alpha/action_list.pcss +3 -1
  16. data/app/components/primer/alpha/action_list.rb +5 -4
  17. data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +20 -0
  18. data/app/components/primer/alpha/action_menu/action_menu_element.js +85 -11
  19. data/app/components/primer/alpha/action_menu/action_menu_element.ts +110 -12
  20. data/app/components/primer/alpha/action_menu/group.rb +23 -0
  21. data/app/components/primer/alpha/action_menu/heading.rb +17 -0
  22. data/app/components/primer/alpha/action_menu/list.html.erb +1 -0
  23. data/app/components/primer/alpha/action_menu/list.rb +62 -51
  24. data/app/components/primer/alpha/action_menu/list_wrapper.rb +40 -0
  25. data/app/components/primer/alpha/action_menu.rb +38 -1
  26. data/app/components/primer/alpha/overlay.css +1 -1
  27. data/app/components/primer/alpha/overlay.css.json +2 -1
  28. data/app/components/primer/alpha/overlay.css.map +1 -1
  29. data/app/components/primer/alpha/overlay.pcss +6 -2
  30. data/app/components/primer/alpha/text_field.css +1 -1
  31. data/app/components/primer/alpha/text_field.css.map +1 -1
  32. data/app/components/primer/alpha/text_field.pcss +3 -3
  33. data/app/components/primer/alpha/tool_tip.js +8 -4
  34. data/app/components/primer/alpha/tool_tip.ts +9 -4
  35. data/app/components/primer/beta/auto_complete/auto_complete.html.erb +1 -7
  36. data/app/components/primer/beta/auto_complete/item.rb +1 -1
  37. data/app/components/primer/beta/auto_complete.rb +6 -1
  38. data/app/components/primer/beta/base_button.rb +2 -3
  39. data/app/components/primer/beta/blankslate.css +1 -1
  40. data/app/components/primer/beta/blankslate.css.map +1 -1
  41. data/app/components/primer/beta/blankslate.pcss +3 -3
  42. data/app/components/primer/beta/border_box.rb +3 -0
  43. data/app/components/primer/beta/button.css +1 -1
  44. data/app/components/primer/beta/button.css.json +9 -8
  45. data/app/components/primer/beta/button.css.map +1 -1
  46. data/app/components/primer/beta/button.pcss +15 -11
  47. data/app/components/primer/beta/nav_list/group.html.erb +7 -5
  48. data/app/components/primer/beta/nav_list/group.rb +2 -2
  49. data/app/components/primer/beta/nav_list.d.ts +0 -11
  50. data/app/components/primer/beta/nav_list.js +2 -85
  51. data/app/components/primer/beta/nav_list.ts +1 -85
  52. data/app/components/primer/beta/nav_list_group_element.d.ts +19 -0
  53. data/app/components/primer/beta/nav_list_group_element.js +108 -0
  54. data/app/components/primer/beta/nav_list_group_element.ts +97 -0
  55. data/app/components/primer/beta/relative_time.rb +4 -4
  56. data/app/components/primer/component.rb +3 -0
  57. data/app/components/primer/open_project/input_group.css +1 -0
  58. data/app/components/primer/open_project/input_group.css.json +11 -0
  59. data/app/components/primer/open_project/input_group.css.map +1 -0
  60. data/app/components/primer/open_project/input_group.html.erb +4 -0
  61. data/app/components/primer/open_project/input_group.pcss +25 -0
  62. data/app/components/primer/open_project/input_group.rb +93 -0
  63. data/app/components/primer/primer.d.ts +1 -0
  64. data/app/components/primer/primer.js +1 -0
  65. data/app/components/primer/primer.pcss +1 -0
  66. data/app/components/primer/primer.ts +1 -0
  67. data/app/lib/primer/experimental_render_helpers.rb +32 -0
  68. data/app/lib/primer/experimental_slot_helpers.rb +30 -0
  69. data/lib/primer/view_components/version.rb +2 -2
  70. data/lib/primer/yard/lookbook_pages_backend.rb +2 -2
  71. data/previews/primer/alpha/action_menu_preview.rb +73 -7
  72. data/previews/primer/alpha/dialog_preview/with_auto_complete.html.erb +8 -0
  73. data/previews/primer/alpha/dialog_preview.rb +17 -0
  74. data/previews/primer/beta/blankslate_preview/inside_flex_container.html.erb +6 -0
  75. data/previews/primer/beta/blankslate_preview.rb +3 -0
  76. data/previews/primer/beta/border_box_preview.rb +3 -2
  77. data/previews/primer/beta/nav_list_preview.rb +10 -1
  78. data/previews/primer/open_project/input_group_preview.rb +63 -0
  79. data/static/arguments.json +108 -1
  80. data/static/audited_at.json +5 -1
  81. data/static/classes.json +6 -0
  82. data/static/constants.json +28 -0
  83. data/static/info_arch.json +365 -52
  84. data/static/previews.json +112 -0
  85. data/static/statuses.json +4 -0
  86. metadata +21 -2
@@ -1 +1 @@
1
- {"version":3,"sources":["text_field.pcss","../../../../lib/postcss_mixins/focusBoxShadowInset.pcss","<no source>","../../../../lib/postcss_mixins/focusOutline.pcss"],"names":[],"mappings":"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","file":"text_field.css","sourcesContent":["/* FormControl */\n\n/* groups label, field, caption and inline error message */\n.FormControl {\n display: inline-flex;\n flex-direction: column;\n gap: var(--base-size-4);\n}\n\n/* fill container */\n.FormControl--fullWidth {\n display: flex;\n}\n\n/* <label> */\n.FormControl-label {\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-semibold);\n line-height: var(--text-body-lineHeight-medium);\n color: var(--fgColor-default);\n user-select: none;\n}\n\n/* optional caption */\n.FormControl-caption {\n margin-bottom: 0;\n font-size: var(--text-caption-size);\n font-weight: var(--text-caption-weight);\n line-height: var(--text-caption-lineHeight);\n color: var(--fgColor-muted);\n}\n\n/* inline validation message */\n.FormControl-inlineValidation {\n display: flex;\n font-size: var(--text-caption-size);\n line-height: var(--text-caption-lineHeight);\n font-weight: var(--base-text-weight-semibold);\n color: var(--control-borderColor-danger);\n fill: var(--control-borderColor-danger);\n flex-direction: row;\n align-items: flex-start;\n gap: var(--base-size-4);\n\n & p {\n margin-bottom: 0;\n }\n}\n\n.FormControl-inlineValidation--success {\n color: var(--control-borderColor-success);\n fill: var(--control-borderColor-success);\n}\n\n.FormControl-inlineValidation--visual {\n align-items: center;\n display: flex;\n min-height: var(--base-size-16);\n}\n\n.FormControl-spacingWrapper {\n display: flex;\n flex-direction: column;\n row-gap: 0.5rem;\n}\n\n.FormControl-horizontalGroup {\n display: flex;\n column-gap: 0.5rem;\n}\n\n/* shared among all form control components (input, select, textarea, checkbox, radio) */\n@define-mixin Field {\n color: var(--fgColor-default);\n background-color: var(--bgColor-default);\n border: var(--borderWidth-thin) solid var(--control-borderColor-rest, var(--color-border-default));\n\n &[disabled] {\n color: var(--control-fgColor-disabled);\n cursor: not-allowed;\n background-color: var(--control-bgColor-disabled);\n border-color: var(--control-borderColor-disabled);\n opacity: 1;\n -webkit-text-fill-color: var(--control-fgColor-disabled);\n }\n\n &:not(:focus)[invalid=true] {\n border-color: var(--control-borderColor-danger);\n }\n\n &:not(:focus)[invalid=false] {\n border-color: var(--control-borderColor-success);\n }\n\n &:not([type='checkbox'], [type='radio']):focus {\n @mixin focusBoxShadowInset;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n border-color: transparent;\n\n @mixin focusBoxShadowInset 1px transparent;\n }\n }\n\n /* default focus state */\n &:not([type='checkbox'], [type='radio']):focus-visible {\n @mixin focusBoxShadowInset;\n }\n}\n\n/* TextInput structure\n** ===================\n**\n** .FormControl\n** ├─ .FormControl-label\n** │ ├─ .FormControl-input-wrap\n** │ │ ├─ .FormControl-input-leadingVisualWrap\n** │ │ │ ├─ .FormControl-input-leadingVisual\n** │ │ ├─ .FormControl-input\n** │ │ ├─ .FormControl-input-trailingAction\n** ├─ .FormControl-inlineValidation\n** ├─ .FormControl-caption */\n\n/* // Select structure\n** ===================\n**\n** .FormControl\n** ├─ .FormControl-label\n** │ ├─ .FormControl-select-wrap\n** │ │ ├─ .FormControl-select\n** ├─ .FormControl-inlineValidation\n** ├─ .FormControl-caption */\n\n/* // Textarea structure\n** ===================\n**\n** .FormControl\n** ├─ .FormControl-label\n** ├─ .FormControl-textarea\n** ├─ .FormControl-inlineValidation\n** ├─ .FormControl-caption */\n\n.FormControl-input,\n.FormControl-select,\n.FormControl-textarea {\n @mixin Field;\n\n width: 100%;\n font-size: var(--text-body-size-medium);\n line-height: var(--text-body-lineHeight-medium);\n border-radius: var(--borderRadius-medium);\n transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);\n transition-property: color, background-color, box-shadow, border-color;\n padding-inline: var(--control-medium-paddingInline-condensed);\n padding-block: calc(var(--control-medium-paddingBlock, 6px) - var(--borderWidth-thin, 1px));\n\n &[disabled] {\n &::placeholder {\n color: var(--control-fgColor-disabled);\n }\n }\n\n &[readonly] {\n background-color: var(--control-bgColor-disabled);\n }\n\n &::placeholder {\n color: var(--control-fgColor-placeholder);\n opacity: 1;\n }\n\n /* sizes */\n\n &.FormControl-small {\n height: var(--control-small-size);\n padding-inline: var(--control-small-paddingInline-normal);\n padding-block: var(--control-small-paddingBlock);\n font-size: var(--text-body-size-small);\n }\n\n &.FormControl-medium {\n height: var(--control-medium-size);\n }\n\n &.FormControl-large {\n height: var(--control-large-size);\n padding-inline: var(--control-large-paddingInline-normal);\n padding-block: var(--control-large-paddingBlock);\n }\n\n /* variants */\n\n &.FormControl-inset {\n background-color: var(--bgColor-muted);\n\n &:focus-visible,\n &:focus {\n background-color: var(--bgColor-default);\n }\n }\n\n &.FormControl-monospace {\n font-family: var(--fontStack-monospace);\n }\n\n /* validation states */\n\n &.FormControl-error {\n border-color: var(--control-borderColor-danger);\n }\n\n &.FormControl-success {\n border-color: var(--control-borderColor-success);\n }\n\n &.FormControl-warning {\n border-color: var(--control-borderColor-warning);\n }\n}\n\n.FormControl-toggleSwitchInput {\n display: flex;\n align-items: flex-start;\n gap: var(--base-size-16);\n}\n\n/* widths */\n@define-mixin FormControl-input-width {\n &.FormControl-input-width--auto {\n max-width: auto;\n }\n\n &.FormControl-input-width--small {\n max-width: min(256px, 100vw - 2rem);\n }\n\n &.FormControl-input-width--medium {\n max-width: min(320px, 100vw - 2rem);\n }\n\n &.FormControl-input-width--large {\n max-width: min(480px, 100vw - 2rem);\n }\n\n &.FormControl-input-width--xlarge {\n max-width: min(640px, 100vw - 2rem);\n }\n\n &.FormControl-input-width--xxlarge {\n max-width: min(960px, 100vw - 2rem);\n }\n}\n\n/* positioning for leading/trailing items for TextInput */\n.FormControl-input-wrap {\n position: relative;\n display: grid;\n\n @mixin FormControl-input-width;\n\n & .FormControl-input-leadingVisualWrap {\n position: absolute;\n top: var(--base-size-8);\n left: var(--base-size-8);\n display: block;\n width: var(--base-size-16);\n height: var(--base-size-16);\n color: var(--fgColor-muted);\n pointer-events: none;\n\n /* octicon */\n & .FormControl-input-leadingVisual {\n display: block;\n user-select: none;\n }\n }\n\n /* TODO: replace with new Button component */\n & .FormControl-input-trailingAction {\n position: absolute;\n top: var(--base-size-4);\n right: var(--base-size-4);\n z-index: 4;\n display: grid;\n width: var(--control-xsmall-size);\n height: var(--control-xsmall-size);\n padding: 0;\n color: var(--fgColor-muted);\n cursor: pointer;\n background: transparent;\n border: 0;\n border-radius: var(--borderRadius-small);\n transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n transition-property: color, background-color, border-color;\n align-items: center;\n justify-content: center;\n\n & svg {\n user-select: none;\n }\n\n &[disabled] {\n color: var(--control-fgColor-disabled);\n pointer-events: none;\n }\n\n &:hover {\n background: var(--control-transparent-bgColor-hover);\n }\n\n &:active {\n background: var(--control-transparent-bgColor-active);\n }\n\n /* show vertical divider line between field and button */\n &.FormControl-input-trailingAction--divider {\n &::before {\n position: absolute;\n top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 2);\n left: calc(var(--base-size-4) * -1);\n display: block;\n width: var(--borderWidth-thin);\n height: var(--base-size-16);\n content: '';\n background: var(--borderColor-default);\n }\n }\n\n &::after {\n @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);\n\n @media (pointer: coarse) {\n min-width: var(--control-minTarget-coarse);\n min-height: var(--control-minTarget-coarse);\n }\n }\n }\n\n /* if leadingVisual is present */\n\n /*\n\t┌──32px──┬────────────────────┐\n\t╎ ┌───┐ ┌────────────────┐ ╎\n\t╎ 16px 16px ╎\n\t╎ └───┘ └────────────────┘ ╎\n\t└───────8px───────────────────┘\n\t*/\n\n &.FormControl-input-wrap--leadingVisual {\n & .FormControl-input {\n padding-inline-start: calc(\n var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)\n ); /* 32px */\n }\n }\n\n /*\n\t┌──────────────────┬──32px──┐\n\t╎ ┌──────────────┐ ┌────┐ ╎\n\t╎ 24px 24px ╎\n\t╎ └──────────────┘ └────┘ ╎\n\t└──────────────────┴────────┘\n */\n\n /* if trailingAction is present */\n &.FormControl-input-wrap--trailingAction {\n & .FormControl-input {\n padding-inline-end: calc(\n var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)\n ); /* 32px */\n }\n\n /*\n\t\t32px + 1px border\n\t\t┌──────────────────┬──33px──┐\n\t\t╎ ┌──────────────┐ ┌────┐ ╎\n\t\t╎ 24px 24px ╎\n\t\t╎ └──────────────┘ └────┘ ╎\n\t\t└──────────────────┴────────┘\n\t\t*/\n\n /* if trailingAction divider is present, add 1px padding to accomodate input field text\n ** can be refactored to has(.FormControl-input-trailingAction--divider) */\n &.FormControl-input-wrap-trailingAction--divider {\n & .FormControl-input {\n padding-inline-end: calc(\n var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap) +\n var(--borderWidth-thin)\n ); /* 33px */\n }\n }\n }\n\n /* size modifications can be refactored with :has() - FormControl-input-wrap:has(.FormControl-large)\n // sizes */\n &.FormControl-input-wrap--small {\n & .FormControl-input-leadingVisualWrap {\n top: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n left: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n }\n\n /*\n ┌──────────────────┬──28px──┐\n ╎ ┌──────────────┐ ┌────┐ ╎\n ╎ 20px 20px ╎\n ╎ └──────────────┘ └────┘ ╎\n └──────────────────┴────────┘\n */\n\n &.FormControl-input-wrap--trailingAction {\n & .FormControl-input.FormControl-small {\n padding-inline-end: calc(\n var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap)\n ); /* 28px */\n }\n\n /*\n\t\t\t28px + 1px border\n\t\t\t┌──────────────────┬──29px──┐\n\t\t\t╎ ┌──────────────┐ ┌────┐ ╎\n\t\t\t╎ 20px 20px ╎\n\t\t\t╎ └──────────────┘ └────┘ ╎\n\t\t\t└──────────────────┴────────┘\n\t\t\t*/\n\n &.FormControl-input-wrap-trailingAction--divider {\n & .FormControl-input.FormControl-small {\n padding-inline-end: calc(\n var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap) +\n var(--borderWidth-thin)\n ); /* 29px */\n }\n }\n }\n\n & .FormControl-input-trailingAction {\n width: calc(var(--control-small-size) - var(--base-size-8));\n height: calc(var(--control-small-size) - var(--base-size-8));\n\n &::before {\n top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 4); /* 2px */\n }\n }\n }\n\n &.FormControl-input-wrap--large {\n & .FormControl-input-leadingVisualWrap {\n top: var(--control-medium-paddingInline-normal);\n left: var(--control-medium-paddingInline-normal);\n }\n\n /*\n ┌──36px──┬───12px padding──────┐\n ╎ ┌───┐ ┌────────────────┐ ╎\n ╎ 16px 16px ╎\n ╎ └───┘ └────────────────┘ ╎\n └12px───8px───────────────────┘\n */\n\n &.FormControl-input-wrap--leadingVisual {\n & .FormControl-input.FormControl-large {\n padding-inline-start: calc(\n var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)\n ); /* 36px */\n }\n }\n\n /*\n ┌──────────────────┬──36px──┐\n ╎ ┌──────────────┐ ┌────┐ ╎\n ╎ 28px 28px ╎\n ╎ └──────────────┘ └────┘ ╎\n └──────────────────┴────────┘\n */\n\n &.FormControl-input-wrap--trailingAction {\n & .FormControl-input.FormControl-large {\n padding-inline-end: calc(\n var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)\n ); /* 36px */\n }\n\n /*\n\t\t\t┌──────────────────┬──37px──┐\n\t\t\t╎ ┌──────────────┐ ┌────┐ ╎\n\t\t\t╎ 28px 28px ╎\n\t\t\t╎ └──────────────┘ └────┘ ╎\n\t\t\t└──────────────────┴────────┘\n\t\t\t*/\n\n &.FormControl-input-wrap-trailingAction--divider {\n & .FormControl-input.FormControl-large {\n padding-inline-end: calc(\n var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap) +\n var(--borderWidth-thin)\n ); /* 37px */\n }\n }\n }\n\n & .FormControl-input-trailingAction {\n top: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n right: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n width: var(--control-small-size);\n height: var(--control-small-size);\n\n &::before {\n top: unset;\n height: var(--base-size-20);\n }\n }\n }\n}\n\n.FormControl-select-wrap {\n display: grid;\n grid-template-columns: minmax(0, auto) var(--base-size-16);\n\n @mixin FormControl-input-width;\n\n /* mask allows for background-color to respect themes */\n &::after {\n width: var(--base-size-16);\n height: var(--base-size-16);\n padding-right: var(--base-size-4);\n pointer-events: none;\n content: '';\n background-color: var(--bgColor-neutral-emphasis);\n mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');\n mask-size: contain;\n mask-repeat: no-repeat;\n grid-column: 2;\n grid-row: 1;\n place-self: center end;\n }\n\n /* spans entire grid below mask */\n & .FormControl-select {\n grid-column: 1/-1;\n grid-row: 1;\n appearance: none;\n padding-right: var(--base-size-20);\n }\n}\n\n/* checkbox + radio specific styles */\n\n/* // Checkbox + Radio structure\n** ===================\n**\n** .FormControl-radio-wrap\n** ├─ .FormControl-radio\n** ├─ .FormControl-radio-labelWrap\n** │ ├─ .FormControl-label\n** │ ├─ .FormControl-caption */\n\n.FormControl-checkbox-wrap,\n.FormControl-radio-wrap {\n display: inline-grid;\n grid-template-columns: min-content auto;\n gap: var(--base-size-8);\n\n & .FormControl-checkbox-labelWrap,\n & .FormControl-radio-labelWrap {\n display: flex;\n flex-direction: column;\n gap: var(--base-size-4);\n }\n\n & .FormControl-label {\n cursor: pointer;\n }\n}\n\n.FormControl-radio-group-wrap {\n & fieldset {\n padding: 0;\n margin: 0;\n border: 0;\n }\n}\n\n.FormControl-check-group-wrap {\n & fieldset {\n padding: 0;\n margin: 0;\n border: 0;\n }\n}\n\n/* these selectors are temporary to override base.scss\n** once Field styles are widely adopted, we can adjust this and the global base styles */\ninput[type='checkbox'].FormControl-checkbox {\n @mixin Field;\n\n position: relative;\n display: grid;\n width: var(--base-size-16);\n height: var(--base-size-16);\n margin: 0;\n margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */\n cursor: pointer;\n border-color: var(--control-borderColor-emphasis);\n border-radius: var(--borderRadius-small);\n transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */\n appearance: none;\n place-content: center;\n\n &::before {\n width: var(--base-size-16);\n height: var(--base-size-16);\n visibility: hidden;\n content: '';\n background-color: var(--control-checked-fgColor-rest);\n transition: visibility 0s linear 230ms;\n clip-path: inset(var(--base-size-16) 0 0 0);\n\n /* octicon checkmark image */\n mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');\n mask-size: 75%;\n mask-repeat: no-repeat;\n mask-position: center;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; /* slightly snappier animation out */\n }\n }\n\n /* extend touch target */\n &::after {\n @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);\n }\n\n &[disabled] {\n & ~ .FormControl-checkbox-labelWrap {\n & .FormControl-label {\n color: var(--control-fgColor-disabled);\n cursor: not-allowed;\n }\n }\n }\n\n &:checked {\n background: var(--control-checked-bgColor-rest, var(--color-accent-fg));\n border-color: var(--control-checked-borderColor-rest, var(--color-accent-fg));\n transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n &::before {\n visibility: visible;\n transition: visibility 0s linear 0s;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n background-color: var(--control-fgColor-disabled);\n border-color: var(--control-fgColor-disabled);\n opacity: 1;\n\n &::before {\n background-color: var(--control-checked-fgColor-rest);\n }\n }\n\n /* Windows High Contrast mode */\n @media (forced-colors: active) {\n background-color: canvastext;\n border-color: canvastext;\n }\n }\n\n &:focus-visible {\n @mixin focusOutline 2px;\n }\n\n &:indeterminate {\n &::before {\n mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');\n visibility: visible;\n }\n }\n}\n\ninput[type='radio'].FormControl-radio {\n @mixin Field;\n\n position: relative;\n width: var(--base-size-16);\n height: var(--base-size-16);\n margin: 0;\n margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */\n cursor: pointer;\n border-color: var(--control-borderColor-emphasis);\n border-radius: var(--borderRadius-full);\n transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */\n appearance: none;\n\n &::after {\n @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);\n }\n\n &[disabled] {\n & ~ .FormControl-radio-labelWrap {\n & .FormControl-label {\n color: var(--control-fgColor-disabled);\n cursor: not-allowed;\n }\n }\n }\n\n &:checked {\n border-color: var(--control-checked-borderColor-rest, var(--color-accent-fg));\n border-width: var(--base-size-4);\n\n &[disabled], &:disabled {\n cursor: not-allowed;\n border-color: var(--control-fgColor-disabled);\n\n & ~ .FormControl-radio-labelWrap {\n & .FormControl-label {\n color: var(--control-fgColor-disabled);\n cursor: not-allowed;\n }\n }\n }\n }\n\n &:focus-visible {\n @mixin focusOutline 2px;\n }\n\n /* Windows High Contrast mode */\n @media (forced-colors: active) {\n background-color: canvastext;\n border-color: canvastext;\n }\n}\n\n@keyframes checkmarkIn {\n from {\n clip-path: inset(var(--base-size-16) 0 0 0);\n }\n\n to {\n clip-path: inset(0 0 0 0);\n }\n}\n\n@keyframes checkmarkOut {\n from {\n clip-path: inset(0 0 0 0);\n }\n\n to {\n clip-path: inset(var(--base-size-16) 0 0 0);\n }\n}\n","/* inset box-shadow for form controls */\n@define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--focus-outlineColor) {\n border-color: var(--focus-outlineColor);\n outline: none;\n box-shadow: inset 0 0 0 $outlineWidth $outlineColor;\n}\n",null,"@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: none;\n}\n"]}
1
+ {"version":3,"sources":["text_field.pcss","../../../../lib/postcss_mixins/focusBoxShadowInset.pcss","<no source>","../../../../lib/postcss_mixins/focusOutline.pcss"],"names":[],"mappings":"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","file":"text_field.css","sourcesContent":["/* FormControl */\n\n/* groups label, field, caption and inline error message */\n.FormControl {\n display: inline-flex;\n flex-direction: column;\n gap: var(--base-size-4);\n}\n\n/* fill container */\n.FormControl--fullWidth {\n display: flex;\n}\n\n/* <label> */\n.FormControl-label {\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-semibold);\n line-height: var(--text-body-lineHeight-medium);\n color: var(--fgColor-default);\n user-select: none;\n}\n\n/* optional caption */\n.FormControl-caption {\n margin-bottom: 0;\n font-size: var(--text-caption-size);\n font-weight: var(--text-caption-weight);\n line-height: var(--text-caption-lineHeight);\n color: var(--fgColor-muted);\n}\n\n/* inline validation message */\n.FormControl-inlineValidation {\n display: flex;\n font-size: var(--text-caption-size);\n line-height: var(--text-caption-lineHeight);\n font-weight: var(--base-text-weight-semibold);\n color: var(--control-borderColor-danger);\n fill: var(--control-borderColor-danger);\n flex-direction: row;\n align-items: flex-start;\n gap: var(--base-size-4);\n\n & p {\n margin-bottom: 0;\n }\n}\n\n.FormControl-inlineValidation--success {\n color: var(--control-borderColor-success);\n fill: var(--control-borderColor-success);\n}\n\n.FormControl-inlineValidation--visual {\n align-items: center;\n display: flex;\n min-height: var(--base-size-16);\n}\n\n.FormControl-spacingWrapper {\n display: flex;\n flex-direction: column;\n row-gap: 0.5rem;\n}\n\n.FormControl-horizontalGroup {\n display: flex;\n column-gap: 0.5rem;\n}\n\n/* shared among all form control components (input, select, textarea, checkbox, radio) */\n@define-mixin Field {\n color: var(--fgColor-default);\n background-color: var(--bgColor-default);\n border: var(--borderWidth-thin) solid var(--control-borderColor-rest, var(--color-border-default));\n\n &[disabled] {\n color: var(--control-fgColor-disabled);\n cursor: not-allowed;\n background-color: var(--control-bgColor-disabled);\n border-color: var(--control-borderColor-disabled);\n opacity: 1;\n -webkit-text-fill-color: var(--control-fgColor-disabled);\n }\n\n &:not(:focus)[invalid=\"true\"] {\n border-color: var(--control-borderColor-danger);\n }\n\n &:not(:focus)[invalid=\"false\"] {\n border-color: var(--control-borderColor-success);\n }\n\n &:not([type='checkbox'], [type='radio']):focus {\n @mixin focusBoxShadowInset;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n border-color: transparent;\n\n @mixin focusBoxShadowInset 1px transparent;\n }\n }\n\n /* default focus state */\n &:not([type='checkbox'], [type='radio']):focus-visible {\n @mixin focusBoxShadowInset;\n }\n}\n\n/* TextInput structure\n** ===================\n**\n** .FormControl\n** ├─ .FormControl-label\n** │ ├─ .FormControl-input-wrap\n** │ │ ├─ .FormControl-input-leadingVisualWrap\n** │ │ │ ├─ .FormControl-input-leadingVisual\n** │ │ ├─ .FormControl-input\n** │ │ ├─ .FormControl-input-trailingAction\n** ├─ .FormControl-inlineValidation\n** ├─ .FormControl-caption */\n\n/* // Select structure\n** ===================\n**\n** .FormControl\n** ├─ .FormControl-label\n** │ ├─ .FormControl-select-wrap\n** │ │ ├─ .FormControl-select\n** ├─ .FormControl-inlineValidation\n** ├─ .FormControl-caption */\n\n/* // Textarea structure\n** ===================\n**\n** .FormControl\n** ├─ .FormControl-label\n** ├─ .FormControl-textarea\n** ├─ .FormControl-inlineValidation\n** ├─ .FormControl-caption */\n\n.FormControl-input,\n.FormControl-select,\n.FormControl-textarea {\n @mixin Field;\n\n width: 100%;\n font-size: var(--text-body-size-medium);\n line-height: var(--text-body-lineHeight-medium);\n border-radius: var(--borderRadius-medium);\n transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);\n transition-property: color, background-color, box-shadow, border-color;\n padding-inline: var(--control-medium-paddingInline-condensed);\n padding-block: calc(var(--control-medium-paddingBlock, 6px) - var(--borderWidth-thin, 1px));\n\n &[disabled] {\n &::placeholder {\n color: var(--control-fgColor-disabled);\n }\n }\n\n &[readonly] {\n background-color: var(--control-bgColor-disabled);\n }\n\n &::placeholder {\n color: var(--control-fgColor-placeholder);\n opacity: 1;\n }\n\n /* sizes */\n\n &.FormControl-small {\n height: var(--control-small-size);\n padding-inline: var(--control-small-paddingInline-normal);\n padding-block: var(--control-small-paddingBlock);\n font-size: var(--text-body-size-small);\n }\n\n &.FormControl-medium {\n height: var(--control-medium-size);\n }\n\n &.FormControl-large {\n height: var(--control-large-size);\n padding-inline: var(--control-large-paddingInline-normal);\n padding-block: var(--control-large-paddingBlock);\n }\n\n /* variants */\n\n &.FormControl-inset {\n background-color: var(--bgColor-muted);\n\n &:focus-visible,\n &:focus {\n background-color: var(--bgColor-default);\n }\n }\n\n &.FormControl-monospace {\n font-family: var(--fontStack-monospace);\n }\n\n /* validation states */\n\n &.FormControl-error {\n border-color: var(--control-borderColor-danger);\n }\n\n &.FormControl-success {\n border-color: var(--control-borderColor-success);\n }\n\n &.FormControl-warning {\n border-color: var(--control-borderColor-warning);\n }\n}\n\n.FormControl-toggleSwitchInput {\n display: flex;\n align-items: flex-start;\n gap: var(--base-size-16);\n}\n\n/* widths */\n@define-mixin FormControl-input-width {\n &.FormControl-input-width--auto {\n width: auto;\n }\n\n &.FormControl-input-width--small {\n max-width: min(256px, 100vw - 2rem);\n }\n\n &.FormControl-input-width--medium {\n max-width: min(320px, 100vw - 2rem);\n }\n\n &.FormControl-input-width--large {\n max-width: min(480px, 100vw - 2rem);\n }\n\n &.FormControl-input-width--xlarge {\n max-width: min(640px, 100vw - 2rem);\n }\n\n &.FormControl-input-width--xxlarge {\n max-width: min(960px, 100vw - 2rem);\n }\n}\n\n/* positioning for leading/trailing items for TextInput */\n.FormControl-input-wrap {\n position: relative;\n display: grid;\n\n @mixin FormControl-input-width;\n\n & .FormControl-input-leadingVisualWrap {\n position: absolute;\n top: var(--base-size-8);\n left: var(--base-size-8);\n display: block;\n width: var(--base-size-16);\n height: var(--base-size-16);\n color: var(--fgColor-muted);\n pointer-events: none;\n\n /* octicon */\n & .FormControl-input-leadingVisual {\n display: block;\n user-select: none;\n }\n }\n\n /* TODO: replace with new Button component */\n & .FormControl-input-trailingAction {\n position: absolute;\n top: var(--base-size-4);\n right: var(--base-size-4);\n z-index: 4;\n display: grid;\n width: var(--control-xsmall-size);\n height: var(--control-xsmall-size);\n padding: 0;\n color: var(--fgColor-muted);\n cursor: pointer;\n background: transparent;\n border: 0;\n border-radius: var(--borderRadius-small);\n transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n transition-property: color, background-color, border-color;\n align-items: center;\n justify-content: center;\n\n & svg {\n user-select: none;\n }\n\n &[disabled] {\n color: var(--control-fgColor-disabled);\n pointer-events: none;\n }\n\n &:hover {\n background: var(--control-transparent-bgColor-hover);\n }\n\n &:active {\n background: var(--control-transparent-bgColor-active);\n }\n\n /* show vertical divider line between field and button */\n &.FormControl-input-trailingAction--divider {\n &::before {\n position: absolute;\n top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 2);\n left: calc(var(--base-size-4) * -1);\n display: block;\n width: var(--borderWidth-thin);\n height: var(--base-size-16);\n content: '';\n background: var(--borderColor-default);\n }\n }\n\n &::after {\n @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);\n\n @media (pointer: coarse) {\n min-width: var(--control-minTarget-coarse);\n min-height: var(--control-minTarget-coarse);\n }\n }\n }\n\n /* if leadingVisual is present */\n\n /*\n\t┌──32px──┬────────────────────┐\n\t╎ ┌───┐ ┌────────────────┐ ╎\n\t╎ 16px 16px ╎\n\t╎ └───┘ └────────────────┘ ╎\n\t└───────8px───────────────────┘\n\t*/\n\n &.FormControl-input-wrap--leadingVisual {\n & .FormControl-input {\n padding-inline-start: calc(\n var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)\n ); /* 32px */\n }\n }\n\n /*\n\t┌──────────────────┬──32px──┐\n\t╎ ┌──────────────┐ ┌────┐ ╎\n\t╎ 24px 24px ╎\n\t╎ └──────────────┘ └────┘ ╎\n\t└──────────────────┴────────┘\n */\n\n /* if trailingAction is present */\n &.FormControl-input-wrap--trailingAction {\n & .FormControl-input {\n padding-inline-end: calc(\n var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)\n ); /* 32px */\n }\n\n /*\n\t\t32px + 1px border\n\t\t┌──────────────────┬──33px──┐\n\t\t╎ ┌──────────────┐ ┌────┐ ╎\n\t\t╎ 24px 24px ╎\n\t\t╎ └──────────────┘ └────┘ ╎\n\t\t└──────────────────┴────────┘\n\t\t*/\n\n /* if trailingAction divider is present, add 1px padding to accomodate input field text\n ** can be refactored to has(.FormControl-input-trailingAction--divider) */\n &.FormControl-input-wrap-trailingAction--divider {\n & .FormControl-input {\n padding-inline-end: calc(\n var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap) +\n var(--borderWidth-thin)\n ); /* 33px */\n }\n }\n }\n\n /* size modifications can be refactored with :has() - FormControl-input-wrap:has(.FormControl-large)\n // sizes */\n &.FormControl-input-wrap--small {\n & .FormControl-input-leadingVisualWrap {\n top: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n left: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n }\n\n /*\n ┌──────────────────┬──28px──┐\n ╎ ┌──────────────┐ ┌────┐ ╎\n ╎ 20px 20px ╎\n ╎ └──────────────┘ └────┘ ╎\n └──────────────────┴────────┘\n */\n\n &.FormControl-input-wrap--trailingAction {\n & .FormControl-input.FormControl-small {\n padding-inline-end: calc(\n var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap)\n ); /* 28px */\n }\n\n /*\n\t\t\t28px + 1px border\n\t\t\t┌──────────────────┬──29px──┐\n\t\t\t╎ ┌──────────────┐ ┌────┐ ╎\n\t\t\t╎ 20px 20px ╎\n\t\t\t╎ └──────────────┘ └────┘ ╎\n\t\t\t└──────────────────┴────────┘\n\t\t\t*/\n\n &.FormControl-input-wrap-trailingAction--divider {\n & .FormControl-input.FormControl-small {\n padding-inline-end: calc(\n var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap) +\n var(--borderWidth-thin)\n ); /* 29px */\n }\n }\n }\n\n & .FormControl-input-trailingAction {\n width: calc(var(--control-small-size) - var(--base-size-8));\n height: calc(var(--control-small-size) - var(--base-size-8));\n\n &::before {\n top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 4); /* 2px */\n }\n }\n }\n\n &.FormControl-input-wrap--large {\n & .FormControl-input-leadingVisualWrap {\n top: var(--control-medium-paddingInline-normal);\n left: var(--control-medium-paddingInline-normal);\n }\n\n /*\n ┌──36px──┬───12px padding──────┐\n ╎ ┌───┐ ┌────────────────┐ ╎\n ╎ 16px 16px ╎\n ╎ └───┘ └────────────────┘ ╎\n └12px───8px───────────────────┘\n */\n\n &.FormControl-input-wrap--leadingVisual {\n & .FormControl-input.FormControl-large {\n padding-inline-start: calc(\n var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)\n ); /* 36px */\n }\n }\n\n /*\n ┌──────────────────┬──36px──┐\n ╎ ┌──────────────┐ ┌────┐ ╎\n ╎ 28px 28px ╎\n ╎ └──────────────┘ └────┘ ╎\n └──────────────────┴────────┘\n */\n\n &.FormControl-input-wrap--trailingAction {\n & .FormControl-input.FormControl-large {\n padding-inline-end: calc(\n var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)\n ); /* 36px */\n }\n\n /*\n\t\t\t┌──────────────────┬──37px──┐\n\t\t\t╎ ┌──────────────┐ ┌────┐ ╎\n\t\t\t╎ 28px 28px ╎\n\t\t\t╎ └──────────────┘ └────┘ ╎\n\t\t\t└──────────────────┴────────┘\n\t\t\t*/\n\n &.FormControl-input-wrap-trailingAction--divider {\n & .FormControl-input.FormControl-large {\n padding-inline-end: calc(\n var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap) +\n var(--borderWidth-thin)\n ); /* 37px */\n }\n }\n }\n\n & .FormControl-input-trailingAction {\n top: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n right: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n width: var(--control-small-size);\n height: var(--control-small-size);\n\n &::before {\n top: unset;\n height: var(--base-size-20);\n }\n }\n }\n}\n\n.FormControl-select-wrap {\n display: grid;\n grid-template-columns: minmax(0, auto) var(--base-size-16);\n\n @mixin FormControl-input-width;\n\n /* mask allows for background-color to respect themes */\n &::after {\n width: var(--base-size-16);\n height: var(--base-size-16);\n padding-right: var(--base-size-4);\n pointer-events: none;\n content: '';\n background-color: var(--bgColor-neutral-emphasis);\n mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');\n mask-size: contain;\n mask-repeat: no-repeat;\n grid-column: 2;\n grid-row: 1;\n place-self: center end;\n }\n\n /* spans entire grid below mask */\n & .FormControl-select {\n grid-column: 1/-1;\n grid-row: 1;\n appearance: none;\n padding-right: var(--base-size-20);\n }\n}\n\n/* checkbox + radio specific styles */\n\n/* // Checkbox + Radio structure\n** ===================\n**\n** .FormControl-radio-wrap\n** ├─ .FormControl-radio\n** ├─ .FormControl-radio-labelWrap\n** │ ├─ .FormControl-label\n** │ ├─ .FormControl-caption */\n\n.FormControl-checkbox-wrap,\n.FormControl-radio-wrap {\n display: inline-grid;\n grid-template-columns: min-content auto;\n gap: var(--base-size-8);\n\n & .FormControl-checkbox-labelWrap,\n & .FormControl-radio-labelWrap {\n display: flex;\n flex-direction: column;\n gap: var(--base-size-4);\n }\n\n & .FormControl-label {\n cursor: pointer;\n }\n}\n\n.FormControl-radio-group-wrap {\n & fieldset {\n padding: 0;\n margin: 0;\n border: 0;\n }\n}\n\n.FormControl-check-group-wrap {\n & fieldset {\n padding: 0;\n margin: 0;\n border: 0;\n }\n}\n\n/* these selectors are temporary to override base.scss\n** once Field styles are widely adopted, we can adjust this and the global base styles */\ninput[type='checkbox'].FormControl-checkbox {\n @mixin Field;\n\n position: relative;\n display: grid;\n width: var(--base-size-16);\n height: var(--base-size-16);\n margin: 0;\n margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */\n cursor: pointer;\n border-color: var(--control-borderColor-emphasis);\n border-radius: var(--borderRadius-small);\n transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */\n appearance: none;\n place-content: center;\n\n &::before {\n width: var(--base-size-16);\n height: var(--base-size-16);\n visibility: hidden;\n content: '';\n background-color: var(--control-checked-fgColor-rest);\n transition: visibility 0s linear 230ms;\n clip-path: inset(var(--base-size-16) 0 0 0);\n\n /* octicon checkmark image */\n mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');\n mask-size: 75%;\n mask-repeat: no-repeat;\n mask-position: center;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; /* slightly snappier animation out */\n }\n }\n\n /* extend touch target */\n &::after {\n @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);\n }\n\n &[disabled] {\n & ~ .FormControl-checkbox-labelWrap {\n & .FormControl-label {\n color: var(--control-fgColor-disabled);\n cursor: not-allowed;\n }\n }\n }\n\n &:checked {\n background: var(--control-checked-bgColor-rest, var(--color-accent-fg));\n border-color: var(--control-checked-borderColor-rest, var(--color-accent-fg));\n transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n &::before {\n visibility: visible;\n transition: visibility 0s linear 0s;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n background-color: var(--control-fgColor-disabled);\n border-color: var(--control-fgColor-disabled);\n opacity: 1;\n\n &::before {\n background-color: var(--control-checked-fgColor-rest);\n }\n }\n\n /* Windows High Contrast mode */\n @media (forced-colors: active) {\n background-color: canvastext;\n border-color: canvastext;\n }\n }\n\n &:focus-visible {\n @mixin focusOutline 2px;\n }\n\n &:indeterminate {\n &::before {\n mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');\n visibility: visible;\n }\n }\n}\n\ninput[type='radio'].FormControl-radio {\n @mixin Field;\n\n position: relative;\n width: var(--base-size-16);\n height: var(--base-size-16);\n margin: 0;\n margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */\n cursor: pointer;\n border-color: var(--control-borderColor-emphasis);\n border-radius: var(--borderRadius-full);\n transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */\n appearance: none;\n\n &::after {\n @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);\n }\n\n &[disabled] {\n & ~ .FormControl-radio-labelWrap {\n & .FormControl-label {\n color: var(--control-fgColor-disabled);\n cursor: not-allowed;\n }\n }\n }\n\n &:checked {\n border-color: var(--control-checked-borderColor-rest, var(--color-accent-fg));\n border-width: var(--base-size-4);\n\n &[disabled], &:disabled {\n cursor: not-allowed;\n border-color: var(--control-fgColor-disabled);\n\n & ~ .FormControl-radio-labelWrap {\n & .FormControl-label {\n color: var(--control-fgColor-disabled);\n cursor: not-allowed;\n }\n }\n }\n }\n\n &:focus-visible {\n @mixin focusOutline 2px;\n }\n\n /* Windows High Contrast mode */\n @media (forced-colors: active) {\n background-color: canvastext;\n border-color: canvastext;\n }\n}\n\n@keyframes checkmarkIn {\n from {\n clip-path: inset(var(--base-size-16) 0 0 0);\n }\n\n to {\n clip-path: inset(0 0 0 0);\n }\n}\n\n@keyframes checkmarkOut {\n from {\n clip-path: inset(0 0 0 0);\n }\n\n to {\n clip-path: inset(var(--base-size-16) 0 0 0);\n }\n}\n","/* inset box-shadow for form controls */\n@define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--focus-outlineColor) {\n border-color: var(--focus-outlineColor);\n outline: none;\n box-shadow: inset 0 0 0 $outlineWidth $outlineColor;\n}\n",null,"@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: none;\n}\n"]}
@@ -84,11 +84,11 @@
84
84
  -webkit-text-fill-color: var(--control-fgColor-disabled);
85
85
  }
86
86
 
87
- &:not(:focus)[invalid=true] {
87
+ &:not(:focus)[invalid="true"] {
88
88
  border-color: var(--control-borderColor-danger);
89
89
  }
90
90
 
91
- &:not(:focus)[invalid=false] {
91
+ &:not(:focus)[invalid="false"] {
92
92
  border-color: var(--control-borderColor-success);
93
93
  }
94
94
 
@@ -228,7 +228,7 @@
228
228
  /* widths */
229
229
  @define-mixin FormControl-input-width {
230
230
  &.FormControl-input-width--auto {
231
- max-width: auto;
231
+ width: auto;
232
232
  }
233
233
 
234
234
  &.FormControl-input-width--small {
@@ -43,7 +43,7 @@ const DIRECTION_CLASSES = [
43
43
  'tooltip-ne',
44
44
  'tooltip-se',
45
45
  'tooltip-nw',
46
- 'tooltip-sw'
46
+ 'tooltip-sw',
47
47
  ];
48
48
  function closeOpenTooltips(except) {
49
49
  for (const tooltip of openTooltips) {
@@ -270,11 +270,11 @@ class ToolTipElement extends HTMLElement {
270
270
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
271
271
  // @ts-ignore popoverTargetElement is not in the type definition
272
272
  (_b = this.control.popoverTargetElement) === null || _b === void 0 ? void 0 : _b.addEventListener('beforetoggle', this, {
273
- signal
273
+ signal,
274
274
  });
275
275
  this.ownerDocument.addEventListener('focusout', focusOutListener);
276
276
  this.ownerDocument.addEventListener('focusin', focusInListener);
277
- this.ownerDocument.addEventListener('keydown', this, { signal });
277
+ this.ownerDocument.addEventListener('keydown', this, { signal, capture: true });
278
278
  }
279
279
  disconnectedCallback() {
280
280
  var _a;
@@ -296,6 +296,10 @@ class ToolTipElement extends HTMLElement {
296
296
  const isMouseDownOnButton = event.type === 'mousedown' && event.currentTarget === this.control;
297
297
  const isOpeningOtherPopover = event.type === 'beforetoggle' && event.currentTarget !== this;
298
298
  const shouldHide = isMouseLeaveFromButton || isEscapeKeydown || isMouseDownOnButton || isOpeningOtherPopover;
299
+ if (showing && isEscapeKeydown) {
300
+ event.stopImmediatePropagation();
301
+ event.preventDefault();
302
+ }
299
303
  await Promise.resolve();
300
304
  if (!showing && shouldShow && !isPopoverOpen(this)) {
301
305
  __classPrivateFieldSet(this, _ToolTipElement_showReason, event.type === 'mouseenter' ? 'mouse' : 'focus', "f");
@@ -409,7 +413,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
409
413
  const position = getAnchoredPosition(this, this.control, {
410
414
  side: __classPrivateFieldGet(this, _ToolTipElement_side, "f"),
411
415
  align: __classPrivateFieldGet(this, _ToolTipElement_align, "f"),
412
- anchorOffset: TOOLTIP_OFFSET
416
+ anchorOffset: TOOLTIP_OFFSET,
413
417
  });
414
418
  const anchorSide = position.anchorSide;
415
419
  const align = position.anchorAlign;
@@ -35,7 +35,7 @@ const DIRECTION_CLASSES = [
35
35
  'tooltip-ne',
36
36
  'tooltip-se',
37
37
  'tooltip-nw',
38
- 'tooltip-sw'
38
+ 'tooltip-sw',
39
39
  ]
40
40
 
41
41
  function closeOpenTooltips(except?: Element) {
@@ -272,11 +272,11 @@ class ToolTipElement extends HTMLElement {
272
272
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
273
273
  // @ts-ignore popoverTargetElement is not in the type definition
274
274
  this.control.popoverTargetElement?.addEventListener('beforetoggle', this, {
275
- signal
275
+ signal,
276
276
  })
277
277
  this.ownerDocument.addEventListener('focusout', focusOutListener)
278
278
  this.ownerDocument.addEventListener('focusin', focusInListener)
279
- this.ownerDocument.addEventListener('keydown', this, {signal})
279
+ this.ownerDocument.addEventListener('keydown', this, {signal, capture: true})
280
280
  }
281
281
 
282
282
  disconnectedCallback() {
@@ -301,6 +301,11 @@ class ToolTipElement extends HTMLElement {
301
301
  const isOpeningOtherPopover = event.type === 'beforetoggle' && event.currentTarget !== this
302
302
  const shouldHide = isMouseLeaveFromButton || isEscapeKeydown || isMouseDownOnButton || isOpeningOtherPopover
303
303
 
304
+ if (showing && isEscapeKeydown) {
305
+ event.stopImmediatePropagation()
306
+ event.preventDefault()
307
+ }
308
+
304
309
  await Promise.resolve()
305
310
  if (!showing && shouldShow && !isPopoverOpen(this)) {
306
311
  this.#showReason = event.type === 'mouseenter' ? 'mouse' : 'focus'
@@ -408,7 +413,7 @@ class ToolTipElement extends HTMLElement {
408
413
  const position = getAnchoredPosition(this, this.control, {
409
414
  side: this.#side,
410
415
  align: this.#align,
411
- anchorOffset: TOOLTIP_OFFSET
416
+ anchorOffset: TOOLTIP_OFFSET,
412
417
  })
413
418
  const anchorSide = position.anchorSide
414
419
  const align = position.anchorAlign
@@ -17,12 +17,6 @@
17
17
  <%= input %>
18
18
  <% end %>
19
19
  </div>
20
- <div class="Overlay-backdrop--anchor">
21
- <div class="<%= @overlay_classes %>">
22
- <div class="Overlay-body Overlay-body--paddingNone">
23
- <%= results %>
24
- </div>
25
- </div>
26
- </div>
20
+ <%= results %>
27
21
  <div id="<%= @list_id %>-feedback" class="sr-only"></div>
28
22
  <% end %>
@@ -51,7 +51,7 @@ module Primer
51
51
  )
52
52
 
53
53
  @system_arguments = deny_tag_argument(**system_arguments)
54
- @system_arguments[:tag] = :li
54
+ @system_arguments[:tag] = :div
55
55
  @system_arguments[:role] = :option
56
56
  @system_arguments[:"data-autocomplete-value"] = value
57
57
 
@@ -38,10 +38,15 @@ module Primer
38
38
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
39
39
  renders_one :results, lambda { |**system_arguments|
40
40
  deny_tag_argument(**system_arguments)
41
- system_arguments[:tag] = :ul
41
+ system_arguments[:tag] = :"anchored-position"
42
+ system_arguments[:anchor] = @input_id
43
+ system_arguments[:side] = "outside-bottom"
44
+ system_arguments[:"allow-out-of-bounds"] = ""
42
45
  system_arguments[:id] = @list_id
46
+ system_arguments[:popover] = ""
43
47
  system_arguments[:classes] = class_names(
44
48
  "ActionListWrap ActionListWrap--inset",
49
+ @overlay_classes,
45
50
  system_arguments[:classes]
46
51
  )
47
52
 
@@ -36,11 +36,10 @@ module Primer
36
36
 
37
37
  @system_arguments[:classes] = class_names(
38
38
  system_arguments[:classes],
39
- "btn-block" => block
39
+ "btn-block" => block,
40
+ "Button--inactive" => inactive
40
41
  )
41
42
 
42
- @system_arguments[:"aria-disabled"] = true if inactive
43
-
44
43
  @disabled = disabled
45
44
  return unless @disabled
46
45
 
@@ -1 +1 @@
1
- .blankslate-container{container-type:inline-size}.blankslate{--blankslate-outer-padding-block:var(--base-size-32,2rem);--blankslate-outer-padding-inline:var(--base-size-32,2rem);padding:var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);position:relative;text-align:center}.blankslate p{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-large,1rem)}.blankslate code{background:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));border-radius:var(--borderRadius-medium,.375rem);font-size:var(--text-body-size-medium,.875rem);padding:2px 5px 3px}.blankslate img{height:56px;width:56px}.blankslate-icon{color:var(--fgColor-muted,var(--color-fg-muted));margin-bottom:var(--stack-gap-condensed,.5rem);margin-left:var(--control-small-gap,.25rem);margin-right:var(--control-small-gap,.25rem)}.blankslate-image{margin-bottom:var(--stack-gap-normal,1rem)}.blankslate-heading{font-size:var(--text-title-size-medium,1.25rem);font-weight:var(--text-title-weight-medium,600);margin-bottom:var(--base-size-4,.25rem)}.blankslate-action{margin-top:var(--stack-gap-normal,1rem)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-spacious,1.5rem)}.blankslate-action:last-of-type{margin-bottom:var(--stack-gap-condensed,.5rem)}.blankslate-capped{border-radius:0 0 var(--borderRadius-medium,.375rem) var(--borderRadius-medium,.375rem)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-80,5rem);--blankslate-outer-padding-inline:var(--base-size-40,2.5rem)}.blankslate-narrow{margin:0 auto;max-width:485px}.blankslate-large img{height:80px;width:80px}.blankslate-large h3{font-size:24px;margin:var(--stack-gap-normal,1rem) 0}.blankslate-large p{font-size:var(--text-body-size-large,1rem)}.blankslate-clean-background{border:0}@container (max-width: 34rem){.blankslate{--blankslate-outer-padding-block:var(--base-size-20,1.25rem);--blankslate-outer-padding-inline:var(--base-size-20,1.25rem)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-44,2.75rem);--blankslate-outer-padding-inline:var(--base-size-28,1.75rem)}.blankslate-icon{margin-bottom:var(--stack-gap-condensed,.5rem)}.blankslate-heading{font-size:var(--text-title-size-small,1rem)}.blankslate p{font-size:var(--text-body-size-medium,.875rem)}.blankslate-action{margin-top:var(--stack-gap-condensed,.5rem)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-normal,1rem)}.blankslate-action:last-of-type{margin-bottom:calc(var(--stack-gap-condensed,.5rem)/2)}}
1
+ .blankslate-container{container-type:inline-size;width:100%}.blankslate{--blankslate-outer-padding-block:var(--base-size-32,2rem);--blankslate-outer-padding-inline:var(--base-size-32,2rem);padding:var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);position:relative;text-align:center}.blankslate p{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-large,1rem)}.blankslate code{background:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));border-radius:var(--borderRadius-medium,.375rem);font-size:var(--text-body-size-medium,.875rem);padding:2px 5px 3px}.blankslate img{height:56px;width:56px}.blankslate-icon{color:var(--fgColor-muted,var(--color-fg-muted));margin-bottom:var(--stack-gap-condensed,.5rem);margin-left:var(--control-small-gap,.25rem);margin-right:var(--control-small-gap,.25rem)}.blankslate-image{margin-bottom:var(--stack-gap-normal,1rem)}.blankslate-heading{font-size:var(--text-title-size-medium,1.25rem);font-weight:var(--text-title-weight-medium,600);margin-bottom:var(--base-size-4,.25rem)}.blankslate-action{margin-top:var(--stack-gap-normal,1rem)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-spacious,1.5rem)}.blankslate-action:last-of-type{margin-bottom:var(--stack-gap-condensed,.5rem)}.blankslate-capped{border-radius:0 0 var(--borderRadius-medium,.375rem) var(--borderRadius-medium,.375rem)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-80,5rem);--blankslate-outer-padding-inline:var(--base-size-40,2.5rem)}.blankslate-narrow{margin:0 auto;max-width:485px}.blankslate-large img{height:80px;width:80px}.blankslate-large h3{font-size:24px;margin:var(--stack-gap-normal,1rem) 0}.blankslate-large p{font-size:var(--text-body-size-large,1rem)}.blankslate-clean-background{border:0}@container (max-width: 34rem){.blankslate{--blankslate-outer-padding-block:var(--base-size-20,1.25rem);--blankslate-outer-padding-inline:var(--base-size-20,1.25rem)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-44,2.75rem);--blankslate-outer-padding-inline:var(--base-size-28,1.75rem)}.blankslate-icon{margin-bottom:var(--stack-gap-condensed,.5rem)}.blankslate-heading{font-size:var(--text-title-size-small,1rem)}.blankslate p{font-size:var(--text-body-size-medium,.875rem)}.blankslate-action{margin-top:var(--stack-gap-condensed,.5rem)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-normal,1rem)}.blankslate-action:last-of-type{margin-bottom:calc(var(--stack-gap-condensed,.5rem)/2)}}
@@ -1 +1 @@
1
- {"version":3,"sources":["blankslate.pcss"],"names":[],"mappings":"AAEA,sBACE,0BACF,CAEA,YACE,yDAAqD,CACrD,0DAAsD,CAGtD,oFAAqF,CADrF,iBAAkB,CAElB,iBAmBF,CAjBE,cACE,gDAA2B,CAC3B,0CACF,CAEA,iBAGE,6DAAkC,CAClC,yGAA8D,CAC9D,gDAAyC,CAHzC,8CAAuC,CADvC,mBAKF,CAEA,gBAEE,WAAY,CADZ,UAEF,CAGF,iBAIE,gDAA2B,CAF3B,8CAAyC,CACzC,2CAAqC,CAFrC,4CAIF,CAEA,kBACE,0CACF,CAEA,oBACE,+CAAwC,CACxC,+CAA4C,CAC5C,uCACF,CAEA,mBACE,uCASF,CAPE,iCACE,2CACF,CAEA,gCACE,8CACF,CAGF,mBACE,uFACF,CAEA,qBACE,yDAAqD,CACrD,4DACF,CAEA,mBAEE,aAAc,CADd,eAEF,CAKE,sBAEE,WAAY,CADZ,UAEF,CAEA,qBAIE,cAAe,CAHf,qCAIF,CAEA,oBACE,0CACF,CAKF,6BACE,QACF,CAIA,8BACE,YACE,4DAAqD,CACrD,6DACF,CAEA,qBACE,4DAAqD,CACrD,6DACF,CAEA,iBACE,8CACF,CAEA,oBACE,2CACF,CAEA,cACE,8CACF,CAEA,mBACE,2CASF,CAPE,iCACE,uCACF,CAEA,gCACE,sDACF,CAEJ","file":"blankslate.css","sourcesContent":["/* blankslate */\n\n.blankslate-container {\n container-type: inline-size;\n}\n\n.blankslate {\n --blankslate-outer-padding-block: var(--base-size-32);\n --blankslate-outer-padding-inline: var(--base-size-32);\n\n position: relative;\n padding: var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);\n text-align: center;\n\n & p {\n color: var(--fgColor-muted);\n font-size: var(--text-body-size-large);\n }\n\n & code {\n padding: 2px 5px 3px;\n font-size: var(--text-body-size-medium);\n background: var(--bgColor-default);\n border: var(--borderWidth-thin) solid var(--borderColor-muted);\n border-radius: var(--borderRadius-medium);\n }\n\n & img {\n width: 56px;\n height: 56px;\n }\n}\n\n.blankslate-icon {\n margin-right: var(--control-small-gap);\n margin-bottom: var(--stack-gap-condensed);\n margin-left: var(--control-small-gap);\n color: var(--fgColor-muted);\n}\n\n.blankslate-image {\n margin-bottom: var(--stack-gap-normal);\n}\n\n.blankslate-heading {\n font-size: var(--text-title-size-medium);\n font-weight: var(--text-title-weight-medium);\n margin-bottom: var(--base-size-4);\n}\n\n.blankslate-action {\n margin-top: var(--stack-gap-normal);\n\n &:first-of-type {\n margin-top: var(--stack-gap-spacious);\n }\n\n &:last-of-type {\n margin-bottom: var(--stack-gap-condensed);\n }\n}\n\n.blankslate-capped {\n border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);\n}\n\n.blankslate-spacious {\n --blankslate-outer-padding-block: var(--base-size-80);\n --blankslate-outer-padding-inline: var(--base-size-40);\n}\n\n.blankslate-narrow {\n max-width: 485px;\n margin: 0 auto;\n}\n\n/* was .large-format\n** QUESTION: should we deprecate this? */\n.blankslate-large {\n & img {\n width: 80px;\n height: 80px;\n }\n\n & h3 {\n margin: var(--stack-gap-normal) 0;\n\n /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */\n font-size: 24px;\n }\n\n & p {\n font-size: var(--text-body-size-large);\n }\n}\n\n/* was .clean-background\n** TO DO: deprecate this and use utility instead */\n.blankslate-clean-background {\n border: 0;\n}\n\n/* At the time these styles were written,\n `34rem` was our \"small\" breakpoint width */\n@container (max-width: 34rem) {\n .blankslate {\n --blankslate-outer-padding-block: var(--base-size-20);\n --blankslate-outer-padding-inline: var(--base-size-20);\n }\n\n .blankslate-spacious {\n --blankslate-outer-padding-block: var(--base-size-44);\n --blankslate-outer-padding-inline: var(--base-size-28);\n }\n\n .blankslate-icon {\n margin-bottom: var(--stack-gap-condensed);\n }\n\n .blankslate-heading {\n font-size: var(--text-title-size-small);\n }\n\n .blankslate p {\n font-size: var(--text-body-size-medium);\n }\n\n .blankslate-action {\n margin-top: var(--stack-gap-condensed);\n \n &:first-of-type {\n margin-top: var(--stack-gap-normal);\n }\n \n &:last-of-type {\n margin-bottom: calc(var(--stack-gap-condensed) / 2);\n }\n }\n}\n "]}
1
+ {"version":3,"sources":["blankslate.pcss"],"names":[],"mappings":"AAEA,sBACE,0BAA2B,CAC3B,UACF,CAEA,YACE,yDAAqD,CACrD,0DAAsD,CAGtD,oFAAqF,CADrF,iBAAkB,CAElB,iBAmBF,CAjBE,cACE,gDAA2B,CAC3B,0CACF,CAEA,iBAGE,6DAAkC,CAClC,yGAA8D,CAC9D,gDAAyC,CAHzC,8CAAuC,CADvC,mBAKF,CAEA,gBAEE,WAAY,CADZ,UAEF,CAGF,iBAIE,gDAA2B,CAF3B,8CAAyC,CACzC,2CAAqC,CAFrC,4CAIF,CAEA,kBACE,0CACF,CAEA,oBACE,+CAAwC,CACxC,+CAA4C,CAC5C,uCACF,CAEA,mBACE,uCASF,CAPE,iCACE,2CACF,CAEA,gCACE,8CACF,CAGF,mBACE,uFACF,CAEA,qBACE,yDAAqD,CACrD,4DACF,CAEA,mBAEE,aAAc,CADd,eAEF,CAKE,sBAEE,WAAY,CADZ,UAEF,CAEA,qBAIE,cAAe,CAHf,qCAIF,CAEA,oBACE,0CACF,CAKF,6BACE,QACF,CAIA,8BACE,YACE,4DAAqD,CACrD,6DACF,CAEA,qBACE,4DAAqD,CACrD,6DACF,CAEA,iBACE,8CACF,CAEA,oBACE,2CACF,CAEA,cACE,8CACF,CAEA,mBACE,2CASF,CAPE,iCACE,uCACF,CAEA,gCACE,sDACF,CAEJ","file":"blankslate.css","sourcesContent":["/* blankslate */\n\n.blankslate-container {\n container-type: inline-size;\n width: 100%;\n}\n\n.blankslate {\n --blankslate-outer-padding-block: var(--base-size-32);\n --blankslate-outer-padding-inline: var(--base-size-32);\n\n position: relative;\n padding: var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);\n text-align: center;\n\n & p {\n color: var(--fgColor-muted);\n font-size: var(--text-body-size-large);\n }\n\n & code {\n padding: 2px 5px 3px;\n font-size: var(--text-body-size-medium);\n background: var(--bgColor-default);\n border: var(--borderWidth-thin) solid var(--borderColor-muted);\n border-radius: var(--borderRadius-medium);\n }\n\n & img {\n width: 56px;\n height: 56px;\n }\n}\n\n.blankslate-icon {\n margin-right: var(--control-small-gap);\n margin-bottom: var(--stack-gap-condensed);\n margin-left: var(--control-small-gap);\n color: var(--fgColor-muted);\n}\n\n.blankslate-image {\n margin-bottom: var(--stack-gap-normal);\n}\n\n.blankslate-heading {\n font-size: var(--text-title-size-medium);\n font-weight: var(--text-title-weight-medium);\n margin-bottom: var(--base-size-4);\n}\n\n.blankslate-action {\n margin-top: var(--stack-gap-normal);\n\n &:first-of-type {\n margin-top: var(--stack-gap-spacious);\n }\n\n &:last-of-type {\n margin-bottom: var(--stack-gap-condensed);\n }\n}\n\n.blankslate-capped {\n border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);\n}\n\n.blankslate-spacious {\n --blankslate-outer-padding-block: var(--base-size-80);\n --blankslate-outer-padding-inline: var(--base-size-40);\n}\n\n.blankslate-narrow {\n max-width: 485px;\n margin: 0 auto;\n}\n\n/* was .large-format\n** QUESTION: should we deprecate this? */\n.blankslate-large {\n & img {\n width: 80px;\n height: 80px;\n }\n\n & h3 {\n margin: var(--stack-gap-normal) 0;\n\n /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */\n font-size: 24px;\n }\n\n & p {\n font-size: var(--text-body-size-large);\n }\n}\n\n/* was .clean-background\n** TO DO: deprecate this and use utility instead */\n.blankslate-clean-background {\n border: 0;\n}\n\n/* At the time these styles were written,\n `34rem` was our \"small\" breakpoint width */\n@container (max-width: 34rem) {\n .blankslate {\n --blankslate-outer-padding-block: var(--base-size-20);\n --blankslate-outer-padding-inline: var(--base-size-20);\n }\n\n .blankslate-spacious {\n --blankslate-outer-padding-block: var(--base-size-44);\n --blankslate-outer-padding-inline: var(--base-size-28);\n }\n\n .blankslate-icon {\n margin-bottom: var(--stack-gap-condensed);\n }\n\n .blankslate-heading {\n font-size: var(--text-title-size-small);\n }\n\n .blankslate p {\n font-size: var(--text-body-size-medium);\n }\n\n .blankslate-action {\n margin-top: var(--stack-gap-condensed);\n\n &:first-of-type {\n margin-top: var(--stack-gap-normal);\n }\n\n &:last-of-type {\n margin-bottom: calc(var(--stack-gap-condensed) / 2);\n }\n }\n}\n"]}
@@ -2,6 +2,7 @@
2
2
 
3
3
  .blankslate-container {
4
4
  container-type: inline-size;
5
+ width: 100%;
5
6
  }
6
7
 
7
8
  .blankslate {
@@ -127,14 +128,13 @@
127
128
 
128
129
  .blankslate-action {
129
130
  margin-top: var(--stack-gap-condensed);
130
-
131
+
131
132
  &:first-of-type {
132
133
  margin-top: var(--stack-gap-normal);
133
134
  }
134
-
135
+
135
136
  &:last-of-type {
136
137
  margin-bottom: calc(var(--stack-gap-condensed) / 2);
137
138
  }
138
139
  }
139
140
  }
140
-
@@ -73,6 +73,8 @@ module Primer
73
73
  # @param padding [Symbol] <%= one_of(Primer::Beta::BorderBox::PADDING_MAPPINGS.keys) %>
74
74
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
75
75
  def initialize(padding: DEFAULT_PADDING, **system_arguments)
76
+ list_id = system_arguments.delete(:list_id)
77
+
76
78
  @system_arguments = deny_tag_argument(**system_arguments)
77
79
  @system_arguments[:tag] = :div
78
80
  @system_arguments[:classes] = class_names(
@@ -83,6 +85,7 @@ module Primer
83
85
 
84
86
  @system_arguments[:system_arguments_denylist] = { [:p, :pt, :pb, :pr, :pl] => PADDING_SUGGESTION }
85
87
  @list_arguments = { tag: :ul }
88
+ @list_arguments[:id] = list_id if list_id
86
89
  end
87
90
 
88
91
  def render?
@@ -1 +1 @@
1
- :root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--button-default-fgColor-rest,var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,.25rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled{box-shadow:none;cursor:not-allowed}.Button[aria-disabled=true]{box-shadow:none;cursor:default}a.Button:hover,summary.Button:hover{-webkit-text-decoration:none;text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium,1.4285);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-leadingVisual svg{fill:currentcolor}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4,.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small,1.6666)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.Button--large{gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow));color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text))}.Button--primary:hover:not(:disabled){background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{fill:var(--fgColor-muted,var(--color-fg-muted));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--secondary:hover:not(:disabled){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover,var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active,var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected,var(--color-btn-selected-bg));box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-default-bgColor-disabled,var(--color-btn-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--invisible.Button--iconOnly{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible:hover:not(:disabled){background-color:var(--button-invisible-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:hover:not(:disabled) .Button-visual{color:var(--button-invisible-iconColor-hover,var(--color-fg-default))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active,var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));border-color:var(--button-invisible-borderColor-disabled,var(--color-action-list-item-default-selected-bg));color:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest,var(--color-btn-outline-text))}.Button--invisible .Button-visual{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default,var(--color-fg-default))}.Button--link{fill:var(--fgColor-link,var(--color-accent-fg));border:none;color:var(--fgColor-link,var(--color-accent-fg));display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){-webkit-text-decoration:underline;text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--danger{fill:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest,var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-danger-fgColor-rest,var(--color-btn-danger-text))}.Button--danger:hover:not(:disabled){fill:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small));color:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text))}.Button--danger:hover:not(:disabled) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));color:var(--buttonCounter-danger-fgColor-hover,var(--color-btn-danger-hover-counter-fg))}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow));color:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text))}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text))}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));color:var(--buttonCounter-danger-fgColor-disabled,var(--color-btn-danger-disabled-counter-fg))}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));color:var(--buttonCounter-danger-fgColor-rest,var(--color-btn-danger-counter-fg))}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.Button--iconOnly.Button--small{width:var(--control-small-size,1.75rem)}.Button--iconOnly.Button--large{width:var(--control-large-size,2.5rem)}
1
+ :root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--button-default-fgColor-rest,var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,.25rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}a.Button:hover,summary.Button:hover{-webkit-text-decoration:none;text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium,1.4285);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-leadingVisual svg{fill:currentcolor}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4,.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small,1.6666)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.Button--large{gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow));color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text))}.Button--primary:hover:not(:disabled,.Button--inactive){background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{fill:var(--fgColor-muted,var(--color-fg-muted));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--secondary:hover:not(:disabled,.Button--inactive){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover,var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active,var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected,var(--color-btn-selected-bg));box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-default-bgColor-disabled,var(--color-btn-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--invisible.Button--iconOnly{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible:hover:not(:disabled,.Button--inactive){background-color:var(--button-invisible-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:hover:not(:disabled,.Button--inactive) .Button-visual{color:var(--button-invisible-iconColor-hover,var(--color-fg-default))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active,var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));border-color:var(--button-invisible-borderColor-disabled,var(--color-action-list-item-default-selected-bg));color:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest,var(--color-btn-outline-text))}.Button--invisible .Button-visual{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default,var(--color-fg-default))}.Button--link{fill:var(--fgColor-link,var(--color-accent-fg));border:none;color:var(--fgColor-link,var(--color-accent-fg));display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled,.Button--inactive){-webkit-text-decoration:underline;text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--danger{fill:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest,var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-danger-fgColor-rest,var(--color-btn-danger-text))}.Button--danger:hover:not(:disabled,.Button--inactive){fill:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small));color:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text))}.Button--danger:hover:not(:disabled,.Button--inactive) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));color:var(--buttonCounter-danger-fgColor-hover,var(--color-btn-danger-hover-counter-fg))}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow));color:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text))}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text))}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));color:var(--buttonCounter-danger-fgColor-disabled,var(--color-btn-danger-disabled-counter-fg))}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));color:var(--buttonCounter-danger-fgColor-rest,var(--color-btn-danger-counter-fg))}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.Button--iconOnly.Button--small{width:var(--control-small-size,1.75rem)}.Button--iconOnly.Button--large{width:var(--control-large-size,2.5rem)}.Button--inactive:not([aria-disabled=true],:disabled){background-color:var(--button-inactive-bgColor);border:0;color:var(--button-inactive-fgColor);cursor:default}
@@ -28,7 +28,7 @@
28
28
  ".Button--large .Button-content>:not(:last-child)",
29
29
  ".Button--fullWidth",
30
30
  ".Button--primary",
31
- ".Button--primary:hover:not(:disabled)",
31
+ ".Button--primary:hover:not(:disabled,.Button--inactive)",
32
32
  ".Button--primary:focus",
33
33
  ".Button--primary:focus:not(:focus-visible)",
34
34
  ".Button--primary:focus-visible",
@@ -38,15 +38,15 @@
38
38
  ".Button--primary[aria-disabled=true]",
39
39
  ".Button--primary .Counter",
40
40
  ".Button--secondary",
41
- ".Button--secondary:hover:not(:disabled)",
41
+ ".Button--secondary:hover:not(:disabled,.Button--inactive)",
42
42
  ".Button--secondary:active:not(:disabled)",
43
43
  ".Button--secondary[aria-pressed=true]",
44
44
  ".Button--secondary:disabled",
45
45
  ".Button--secondary[aria-disabled=true]",
46
46
  ".Button--invisible",
47
47
  ".Button--invisible.Button--iconOnly",
48
- ".Button--invisible:hover:not(:disabled)",
49
- ".Button--invisible:hover:not(:disabled) .Button-visual",
48
+ ".Button--invisible:hover:not(:disabled,.Button--inactive)",
49
+ ".Button--invisible:hover:not(:disabled,.Button--inactive) .Button-visual",
50
50
  ".Button--invisible:active:not(:disabled)",
51
51
  ".Button--invisible[aria-pressed=true]",
52
52
  ".Button--invisible:disabled",
@@ -55,14 +55,14 @@
55
55
  ".Button--invisible .Button-visual",
56
56
  ".Button--invisible .Button-visual .Counter",
57
57
  ".Button--link",
58
- ".Button--link:hover:not(:disabled)",
58
+ ".Button--link:hover:not(:disabled,.Button--inactive)",
59
59
  ".Button--link:focus",
60
60
  ".Button--link:focus-visible",
61
61
  ".Button--link:disabled",
62
62
  ".Button--link[aria-disabled=true]",
63
63
  ".Button--danger",
64
- ".Button--danger:hover:not(:disabled)",
65
- ".Button--danger:hover:not(:disabled) .Counter",
64
+ ".Button--danger:hover:not(:disabled,.Button--inactive)",
65
+ ".Button--danger:hover:not(:disabled,.Button--inactive) .Counter",
66
66
  ".Button--danger:active:not(:disabled)",
67
67
  ".Button--danger[aria-pressed=true]",
68
68
  ".Button--danger:disabled",
@@ -72,6 +72,7 @@
72
72
  ".Button--danger .Counter",
73
73
  ".Button--iconOnly",
74
74
  ".Button--iconOnly.Button--small",
75
- ".Button--iconOnly.Button--large"
75
+ ".Button--iconOnly.Button--large",
76
+ ".Button--inactive:not([aria-disabled=true],:disabled)"
76
77
  ]
77
78
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* CSS for Button */\n\n/* temporary, pre primitives release */\n:root {\n --duration-fast: 80ms;\n --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-medium);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid;\n border-color: transparent;\n border-radius: var(--borderRadius-medium);\n color: var(--button-default-fgColor-rest);\n transition: var(--duration-fast) var(--easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--control-medium-size);\n padding: 0 var(--control-medium-paddingInline-normal);\n display: inline-flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--base-size-4);\n min-width: max-content;\n\n /* mobile friendly sizing */\n @media (pointer: coarse) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--duration-fast);\n }\n\n &:active {\n transition: none;\n }\n\n &:disabled {\n cursor: not-allowed;\n box-shadow: none;\n }\n\n &[aria-disabled='true'] {\n cursor: default;\n box-shadow: none;\n }\n}\n\na.Button,\nsummary.Button {\n &:hover {\n text-decoration: none;\n }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n place-content: center;\n\n /* padding-bottom: 1px; optical alignment for firefox */\n\n & > :not(:last-child) {\n margin-right: var(--control-medium-gap);\n }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n display: flex;\n pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n & .Counter {\n color: inherit;\n background-color: var(--buttonCounter-default-bgColor-rest);\n }\n}\n\n.Button-label {\n grid-area: text;\n white-space: nowrap;\n line-height: var(--text-body-lineHeight-medium);\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-leadingVisual svg {\n fill: currentcolor;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n font-size: var(--text-body-size-small);\n height: var(--control-small-size);\n padding: 0 var(--control-small-paddingInline-condensed);\n gap: var(--control-small-gap);\n\n & .Button-label {\n line-height: var(--text-body-lineHeight-small);\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--control-small-gap);\n }\n }\n}\n\n.Button--large {\n height: var(--control-large-size);\n padding: 0 var(--control-large-paddingInline-spacious);\n gap: var(--control-large-gap);\n\n & .Button-label {\n line-height: var(--text-body-lineHeight-large);\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--control-large-gap);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--button-primary-fgColor-rest);\n fill: var(--button-primary-iconColor-rest);\n background-color: var(--button-primary-bgColor-rest);\n border-color: var(--button-primary-borderColor-rest);\n box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow));\n\n &:hover:not(:disabled) {\n background-color: var(--button-primary-bgColor-hover);\n border-color: var(--button-primary-borderColor-hover);\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n background-color: var(--button-primary-bgColor-active);\n box-shadow: var(--button-primary-shadow-selected);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-primary-fgColor-disabled);\n background-color: var(--button-primary-bgColor-disabled);\n border-color: var(--button-primary-borderColor-disabled);\n fill: var(--button-primary-fgColor-disabled);\n }\n\n & .Counter {\n color: inherit;\n background-color: var(--buttonCounter-primary-bgColor-rest);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--button-default-fgColor-rest);\n fill: var(--fgColor-muted); /* help this */\n background-color: var(--button-default-bgColor-rest);\n border-color: var(--button-default-borderColor-rest);\n box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n &:hover:not(:disabled) {\n background-color: var(--button-default-bgColor-hover);\n border-color: var(--button-default-borderColor-hover);\n }\n\n &:active:not(:disabled) {\n background-color: var(--button-default-bgColor-active);\n border-color: var(--button-default-borderColor-active);\n }\n\n &[aria-pressed='true'] {\n background-color: var(--button-default-bgColor-selected);\n box-shadow: var(--shadow-inset);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--control-fgColor-disabled);\n background-color: var(--button-default-bgColor-disabled);\n border-color: var(--button-default-borderColor-disabled);\n fill: var(--control-fgColor-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--button-default-fgColor-rest);\n\n &.Button--iconOnly {\n color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));\n }\n\n &:hover:not(:disabled) {\n background-color: var(--button-invisible-bgColor-hover);\n\n & .Button-visual {\n color: var(--button-invisible-iconColor-hover, var(--color-fg-default));\n }\n }\n\n &[aria-pressed='true'],\n &:active:not(:disabled) {\n background-color: var(--button-invisible-bgColor-active);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-invisible-fgColor-disabled);\n background-color: var(--button-invisible-bgColor-disabled);\n border-color: var(--button-invisible-borderColor-disabled);\n fill: var(--button-invisible-fgColor-disabled);\n }\n\n /* if button has no visuals, use link blue for text */\n &.Button--invisible-noVisuals .Button-label {\n color: var(--button-invisible-fgColor-rest);\n }\n\n & .Button-visual {\n color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));\n\n & .Counter {\n color: var(--fgColor-default);\n }\n }\n}\n\n.Button--link {\n color: var(--fgColor-link);\n fill: var(--fgColor-link);\n display: inline-block;\n font-size: inherit;\n border: none;\n height: unset;\n padding: 0;\n\n &:hover:not(:disabled) {\n text-decoration: underline;\n }\n\n &:focus-visible,\n &:focus {\n outline-offset: 2px;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--control-fgColor-disabled);\n background-color: transparent;\n border-color: transparent;\n fill: var(--control-fgColor-disabled);\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--button-danger-fgColor-rest);\n fill: var(--button-danger-iconColor-rest);\n background-color: var(--button-danger-bgColor-rest);\n border-color: var(--button-danger-borderColor-rest);\n box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n &:hover:not(:disabled) {\n color: var(--button-danger-fgColor-hover);\n fill: var(--button-danger-fgColor-hover);\n background-color: var(--button-danger-bgColor-hover);\n border-color: var(--button-danger-borderColor-hover);\n box-shadow: var(--shadow-resting-small);\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-hover);\n background-color: var(--buttonCounter-danger-bgColor-hover);\n }\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n color: var(--button-danger-fgColor-active);\n fill: var(--button-danger-fgColor-active);\n background-color: var(--button-danger-bgColor-active);\n border-color: var(--button-danger-borderColor-active);\n box-shadow: var(--button-danger-shadow-selected);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-danger-fgColor-disabled);\n fill: var(--button-danger-fgColor-disabled);\n background-color: var(--button-danger-bgColor-disabled);\n border-color: var(--button-default-borderColor-disabled);\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-disabled);\n background-color: var(--buttonCounter-danger-bgColor-disabled);\n }\n }\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-rest);\n background-color: var(--buttonCounter-danger-bgColor-rest);\n }\n}\n\n.Button--iconOnly {\n display: inline-grid;\n place-content: center;\n padding: unset;\n width: var(--control-medium-size);\n\n &.Button--small {\n width: var(--control-small-size);\n }\n\n &.Button--large {\n width: var(--control-large-size);\n }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);\n}\n"]}
1
+ {"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* CSS for Button */\n\n/* temporary, pre primitives release */\n:root {\n --duration-fast: 80ms;\n --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-medium);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid;\n border-color: transparent;\n border-radius: var(--borderRadius-medium);\n color: var(--button-default-fgColor-rest);\n transition: var(--duration-fast) var(--easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--control-medium-size);\n padding: 0 var(--control-medium-paddingInline-normal);\n display: inline-flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--base-size-4);\n min-width: max-content;\n\n /* mobile friendly sizing */\n @media (pointer: coarse) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--duration-fast);\n }\n\n &:active {\n transition: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n box-shadow: none;\n }\n}\n\na.Button,\nsummary.Button {\n &:hover {\n text-decoration: none;\n }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n place-content: center;\n\n /* padding-bottom: 1px; optical alignment for firefox */\n\n & > :not(:last-child) {\n margin-right: var(--control-medium-gap);\n }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n display: flex;\n pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n & .Counter {\n color: inherit;\n background-color: var(--buttonCounter-default-bgColor-rest);\n }\n}\n\n.Button-label {\n grid-area: text;\n white-space: nowrap;\n line-height: var(--text-body-lineHeight-medium);\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-leadingVisual svg {\n fill: currentcolor;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n font-size: var(--text-body-size-small);\n height: var(--control-small-size);\n padding: 0 var(--control-small-paddingInline-condensed);\n gap: var(--control-small-gap);\n\n & .Button-label {\n line-height: var(--text-body-lineHeight-small);\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--control-small-gap);\n }\n }\n}\n\n.Button--large {\n height: var(--control-large-size);\n padding: 0 var(--control-large-paddingInline-spacious);\n gap: var(--control-large-gap);\n\n & .Button-label {\n line-height: var(--text-body-lineHeight-large);\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--control-large-gap);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--button-primary-fgColor-rest);\n fill: var(--button-primary-iconColor-rest);\n background-color: var(--button-primary-bgColor-rest);\n border-color: var(--button-primary-borderColor-rest);\n box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow));\n\n &:hover:not(:disabled, .Button--inactive) {\n background-color: var(--button-primary-bgColor-hover);\n border-color: var(--button-primary-borderColor-hover);\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n background-color: var(--button-primary-bgColor-active);\n box-shadow: var(--button-primary-shadow-selected);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-primary-fgColor-disabled);\n background-color: var(--button-primary-bgColor-disabled);\n border-color: var(--button-primary-borderColor-disabled);\n fill: var(--button-primary-fgColor-disabled);\n }\n\n & .Counter {\n color: inherit;\n background-color: var(--buttonCounter-primary-bgColor-rest);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--button-default-fgColor-rest);\n fill: var(--fgColor-muted); /* help this */\n background-color: var(--button-default-bgColor-rest);\n border-color: var(--button-default-borderColor-rest);\n box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n &:hover:not(:disabled, .Button--inactive) {\n background-color: var(--button-default-bgColor-hover);\n border-color: var(--button-default-borderColor-hover);\n }\n\n &:active:not(:disabled) {\n background-color: var(--button-default-bgColor-active);\n border-color: var(--button-default-borderColor-active);\n }\n\n &[aria-pressed='true'] {\n background-color: var(--button-default-bgColor-selected);\n box-shadow: var(--shadow-inset);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--control-fgColor-disabled);\n background-color: var(--button-default-bgColor-disabled);\n border-color: var(--button-default-borderColor-disabled);\n fill: var(--control-fgColor-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--button-default-fgColor-rest);\n\n &.Button--iconOnly {\n color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));\n }\n\n &:hover:not(:disabled, .Button--inactive) {\n background-color: var(--button-invisible-bgColor-hover);\n\n & .Button-visual {\n color: var(--button-invisible-iconColor-hover, var(--color-fg-default));\n }\n }\n\n &[aria-pressed='true'],\n &:active:not(:disabled) {\n background-color: var(--button-invisible-bgColor-active);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-invisible-fgColor-disabled);\n background-color: var(--button-invisible-bgColor-disabled);\n border-color: var(--button-invisible-borderColor-disabled);\n fill: var(--button-invisible-fgColor-disabled);\n }\n\n /* if button has no visuals, use link blue for text */\n &.Button--invisible-noVisuals .Button-label {\n color: var(--button-invisible-fgColor-rest);\n }\n\n & .Button-visual {\n color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));\n\n & .Counter {\n color: var(--fgColor-default);\n }\n }\n}\n\n.Button--link {\n color: var(--fgColor-link);\n fill: var(--fgColor-link);\n display: inline-block;\n font-size: inherit;\n border: none;\n height: unset;\n padding: 0;\n\n &:hover:not(:disabled, .Button--inactive) {\n text-decoration: underline;\n }\n\n &:focus-visible,\n &:focus {\n outline-offset: 2px;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--control-fgColor-disabled);\n background-color: transparent;\n border-color: transparent;\n fill: var(--control-fgColor-disabled);\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--button-danger-fgColor-rest);\n fill: var(--button-danger-iconColor-rest);\n background-color: var(--button-danger-bgColor-rest);\n border-color: var(--button-danger-borderColor-rest);\n box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n &:hover:not(:disabled, .Button--inactive) {\n color: var(--button-danger-fgColor-hover);\n fill: var(--button-danger-fgColor-hover);\n background-color: var(--button-danger-bgColor-hover);\n border-color: var(--button-danger-borderColor-hover);\n box-shadow: var(--shadow-resting-small);\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-hover);\n background-color: var(--buttonCounter-danger-bgColor-hover);\n }\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n color: var(--button-danger-fgColor-active);\n fill: var(--button-danger-fgColor-active);\n background-color: var(--button-danger-bgColor-active);\n border-color: var(--button-danger-borderColor-active);\n box-shadow: var(--button-danger-shadow-selected);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--button-danger-fgColor-disabled);\n fill: var(--button-danger-fgColor-disabled);\n background-color: var(--button-danger-bgColor-disabled);\n border-color: var(--button-default-borderColor-disabled);\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-disabled);\n background-color: var(--buttonCounter-danger-bgColor-disabled);\n }\n }\n\n & .Counter {\n color: var(--buttonCounter-danger-fgColor-rest);\n background-color: var(--buttonCounter-danger-bgColor-rest);\n }\n}\n\n.Button--iconOnly {\n display: inline-grid;\n place-content: center;\n padding: unset;\n width: var(--control-medium-size);\n\n &.Button--small {\n width: var(--control-small-size);\n }\n\n &.Button--large {\n width: var(--control-large-size);\n }\n}\n\n/* `disabled` takes precedence over `inactive` */\n.Button--inactive:not([aria-disabled='true'], :disabled) {\n background-color: var(--button-inactive-bgColor);\n border: 0;\n color: var(--button-inactive-fgColor);\n cursor: default;\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);\n}\n"]}