diff --git a/package.json b/package.json index fd1bc0f51a..4b57ff0a2b 100644 --- a/package.json +++ b/package.json @@ -327,6 +327,7 @@ "command": "yarn workspace @spectrum-web-components/icons-ui build", "files": [ "packages/icons-ui/bin/build.js", + "packages/icons-ui/packages.json", "node_modules/@spectrum-css/ui-icons/dist/medium/**.svg" ], "output": [ diff --git a/packages/accordion/package.json b/packages/accordion/package.json index 81433d1428..500215b8c4 100644 --- a/packages/accordion/package.json +++ b/packages/accordion/package.json @@ -73,7 +73,7 @@ "@spectrum-web-components/shared": "^0.40.2" }, "devDependencies": { - "@spectrum-css/accordion": "^4.0.17" + "@spectrum-css/accordion": "^4.0.27" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/action-bar/package.json b/packages/action-bar/package.json index 44d0f36dab..4947d9c6fc 100644 --- a/packages/action-bar/package.json +++ b/packages/action-bar/package.json @@ -64,7 +64,7 @@ "@spectrum-web-components/popover": "^0.40.2" }, "devDependencies": { - "@spectrum-css/actionbar": "^7.0.1" + "@spectrum-css/actionbar": "^7.0.11" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/action-button/package.json b/packages/action-button/package.json index a963abb020..6ea817183e 100644 --- a/packages/action-button/package.json +++ b/packages/action-button/package.json @@ -64,7 +64,7 @@ "@spectrum-web-components/shared": "^0.40.2" }, "devDependencies": { - "@spectrum-css/actionbutton": "^5.0.7" + "@spectrum-css/actionbutton": "^5.0.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/action-group/package.json b/packages/action-group/package.json index d916313dc0..ad303c4d48 100644 --- a/packages/action-group/package.json +++ b/packages/action-group/package.json @@ -64,7 +64,7 @@ "@spectrum-web-components/reactive-controllers": "^0.40.2" }, "devDependencies": { - "@spectrum-css/actiongroup": "^4.0.7" + "@spectrum-css/actiongroup": "^4.1.9" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/action-group/stories/action-group-tooltip.stories.ts b/packages/action-group/stories/action-group-tooltip.stories.ts index 6a1f17480f..0d132c834a 100644 --- a/packages/action-group/stories/action-group-tooltip.stories.ts +++ b/packages/action-group/stories/action-group-tooltip.stories.ts @@ -284,7 +284,7 @@ class ActionGroupTooltips extends SpectrumElement { > - + Left align @@ -341,7 +341,7 @@ class ActionGroupTooltips extends SpectrumElement { > - + Center align @@ -398,7 +398,7 @@ class ActionGroupTooltips extends SpectrumElement { > - + Right align diff --git a/packages/action-menu/package.json b/packages/action-menu/package.json index 1af75abd2e..4dd70f63ad 100644 --- a/packages/action-menu/package.json +++ b/packages/action-menu/package.json @@ -69,7 +69,7 @@ "@spectrum-web-components/shared": "^0.40.2" }, "devDependencies": { - "@spectrum-css/actionmenu": "^5.0.0" + "@spectrum-css/actionmenu": "^5.0.10" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/alert-dialog/package.json b/packages/alert-dialog/package.json index 4580b09484..f384205f62 100644 --- a/packages/alert-dialog/package.json +++ b/packages/alert-dialog/package.json @@ -66,7 +66,7 @@ "@spectrum-web-components/shared": "^0.40.2" }, "devDependencies": { - "@spectrum-css/alertdialog": "^1.0.6" + "@spectrum-css/alertdialog": "^1.0.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/alert-dialog/src/spectrum-alert-dialog.css b/packages/alert-dialog/src/spectrum-alert-dialog.css index 2e77a01bcc..4668ebadc2 100644 --- a/packages/alert-dialog/src/spectrum-alert-dialog.css +++ b/packages/alert-dialog/src/spectrum-alert-dialog.css @@ -65,11 +65,11 @@ governing permissions and limitations under the License. display: flex; inline-size: -moz-fit-content; inline-size: fit-content; + max-block-size: inherit; max-inline-size: var( --mod-alert-dialog-max-width, var(--spectrum-alert-dialog-max-width) ); - max-height: inherit; min-inline-size: var( --mod-alert-dialog-min-width, var(--spectrum-alert-dialog-min-width) @@ -90,7 +90,7 @@ governing permissions and limitations under the License. --mod-alert-dialog-icon-size, var(--spectrum-alert-dialog-icon-size) ); - margin-left: var( + margin-inline-start: var( --mod-alert-dialog-title-to-icon, var(--spectrum-alert-dialog-title-to-icon) ); diff --git a/packages/asset/package.json b/packages/asset/package.json index cc4844db3c..308297e983 100644 --- a/packages/asset/package.json +++ b/packages/asset/package.json @@ -60,7 +60,7 @@ "@spectrum-web-components/base": "^0.40.2" }, "devDependencies": { - "@spectrum-css/asset": "^3.0.48" + "@spectrum-css/asset": "^3.0.51" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/avatar/package.json b/packages/avatar/package.json index 80282fdcd1..b3ce6d91f4 100644 --- a/packages/avatar/package.json +++ b/packages/avatar/package.json @@ -61,7 +61,7 @@ "@spectrum-web-components/shared": "^0.40.2" }, "devDependencies": { - "@spectrum-css/avatar": "^6.0.52" + "@spectrum-css/avatar": "^6.0.62" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/avatar/src/spectrum-avatar.css b/packages/avatar/src/spectrum-avatar.css index b068fef4c4..0a17747bef 100644 --- a/packages/avatar/src/spectrum-avatar.css +++ b/packages/avatar/src/spectrum-avatar.css @@ -65,7 +65,6 @@ governing permissions and limitations under the License. } @media (forced-colors: active) { :host { - --highcontrast-avatar-color-opacity-disabled: 1; --highcontrast-avatar-focus-indicator-color: CanvasText; } } @@ -220,7 +219,7 @@ governing permissions and limitations under the License. position: absolute; } .link { - outline: none; + outline: solid #0000; } .image { block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size)); diff --git a/packages/badge/package.json b/packages/badge/package.json index 5059dcf54e..5c4dbbd13c 100644 --- a/packages/badge/package.json +++ b/packages/badge/package.json @@ -61,7 +61,7 @@ "@spectrum-web-components/shared": "^0.40.2" }, "devDependencies": { - "@spectrum-css/badge": "^3.1.8" + "@spectrum-css/badge": "^3.1.18" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/badge/src/spectrum-badge.css b/packages/badge/src/spectrum-badge.css index e533fd61c6..9275cff3ed 100644 --- a/packages/badge/src/spectrum-badge.css +++ b/packages/badge/src/spectrum-badge.css @@ -199,7 +199,6 @@ governing permissions and limitations under the License. :host { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; - font-smoothing: subpixel-antialiased; background: var( --mod-badge-background-color-default, var(--spectrum-badge-background-color-default) diff --git a/packages/button-group/package.json b/packages/button-group/package.json index d50482dc41..f68a4ff8e7 100644 --- a/packages/button-group/package.json +++ b/packages/button-group/package.json @@ -61,7 +61,7 @@ "@spectrum-web-components/button": "^0.40.2" }, "devDependencies": { - "@spectrum-css/buttongroup": "^6.1.6" + "@spectrum-css/buttongroup": "^6.1.16" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/button/package.json b/packages/button/package.json index 19bb6e1f1f..6d1c8b2946 100644 --- a/packages/button/package.json +++ b/packages/button/package.json @@ -90,7 +90,7 @@ "@spectrum-web-components/shared": "^0.40.2" }, "devDependencies": { - "@spectrum-css/button": "^11.0.8" + "@spectrum-css/button": "^11.0.18" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/button/src/spectrum-button.css b/packages/button/src/spectrum-button.css index 73966036cb..60d3822542 100644 --- a/packages/button/src/spectrum-button.css +++ b/packages/button/src/spectrum-button.css @@ -66,6 +66,8 @@ governing permissions and limitations under the License. } :host:after { display: block; + inset-block: 0; + inset-inline: 0; margin: calc( var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1 ); @@ -106,11 +108,11 @@ governing permissions and limitations under the License. --spectrum-button-border-radius: var(--spectrum-corner-radius-100); --spectrum-button-border-width: var(--spectrum-border-width-200); --spectrum-button-line-height: 1.2; + --spectrum-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); --spectrum-button-focus-ring-border-radius: calc( var(--spectrum-button-border-radius) + var(--spectrum-button-focus-ring-gap) ); - --spectrum-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); --spectrum-button-focus-ring-thickness: var( --spectrum-focus-indicator-thickness ); diff --git a/packages/card/package.json b/packages/card/package.json index 9bd7957e11..7a40935c2c 100644 --- a/packages/card/package.json +++ b/packages/card/package.json @@ -67,7 +67,7 @@ "@spectrum-web-components/styles": "^0.40.2" }, "devDependencies": { - "@spectrum-css/card": "^6.2.1" + "@spectrum-css/card": "^6.2.2" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json index f629942d25..438849e731 100644 --- a/packages/checkbox/package.json +++ b/packages/checkbox/package.json @@ -71,7 +71,7 @@ "@spectrum-web-components/shared": "^0.40.2" }, "devDependencies": { - "@spectrum-css/checkbox": "^8.0.3" + "@spectrum-css/checkbox": "^8.0.4" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/clear-button/package.json b/packages/clear-button/package.json index a5777f2ccd..4055267a2c 100644 --- a/packages/clear-button/package.json +++ b/packages/clear-button/package.json @@ -45,7 +45,7 @@ "@spectrum-web-components/base": "^0.40.2" }, "devDependencies": { - "@spectrum-css/clearbutton": "^5.0.5" + "@spectrum-css/clearbutton": "^5.0.15" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/close-button/package.json b/packages/close-button/package.json index 9484d3b34f..f58a92c09f 100644 --- a/packages/close-button/package.json +++ b/packages/close-button/package.json @@ -45,7 +45,7 @@ "@spectrum-web-components/base": "^0.40.2" }, "devDependencies": { - "@spectrum-css/closebutton": "^4.0.7" + "@spectrum-css/closebutton": "^4.0.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/close-button/src/spectrum-close-button.css b/packages/close-button/src/spectrum-close-button.css index c7fe0b2581..fafd68102d 100644 --- a/packages/close-button/src/spectrum-close-button.css +++ b/packages/close-button/src/spectrum-close-button.css @@ -223,6 +223,10 @@ governing permissions and limitations under the License. :host { align-items: center; align-self: var(--mod-closebutton-align-self); + block-size: var( + --mod-closebutton-height, + var(--spectrum-closebutton-height) + ); border-color: #0000; border-radius: var( --mod-closebutton-border-radius, @@ -232,7 +236,10 @@ governing permissions and limitations under the License. color: inherit; display: inline-flex; flex-direction: row; - height: var(--mod-closebutton-height, var(--spectrum-closebutton-height)); + inline-size: var( + --mod-closebutton-width, + var(--spectrum-closebutton-width) + ); justify-content: center; margin-block-start: var(--mod-closebutton-margin-top); margin-inline: var(--mod-closebutton-margin-inline); @@ -244,7 +251,6 @@ governing permissions and limitations under the License. var(--spectrum-closebutton-animation-duration) ) ease-in-out; - width: var(--mod-closebutton-width, var(--spectrum-closebutton-width)); } :host:after { border-radius: calc( @@ -255,7 +261,8 @@ governing permissions and limitations under the License. ) ); content: ''; - inset: 0; + inset-block: 0; + inset-inline: 0; margin: calc( var( --mod-closebutton-focus-indicator-gap, diff --git a/packages/color-area/package.json b/packages/color-area/package.json index d96d5e6f39..01637cf555 100644 --- a/packages/color-area/package.json +++ b/packages/color-area/package.json @@ -69,7 +69,7 @@ "@spectrum-web-components/shared": "^0.40.2" }, "devDependencies": { - "@spectrum-css/colorarea": "^4.0.41" + "@spectrum-css/colorarea": "^4.0.51" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/color-handle/package.json b/packages/color-handle/package.json index 99a89a948e..5f2e11023b 100644 --- a/packages/color-handle/package.json +++ b/packages/color-handle/package.json @@ -62,7 +62,7 @@ "@spectrum-web-components/opacity-checkerboard": "^0.40.2" }, "devDependencies": { - "@spectrum-css/colorhandle": "^7.0.7" + "@spectrum-css/colorhandle": "^7.0.17" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/color-loupe/package.json b/packages/color-loupe/package.json index 06d7e659d5..d224796cc5 100644 --- a/packages/color-loupe/package.json +++ b/packages/color-loupe/package.json @@ -61,7 +61,7 @@ "@spectrum-web-components/opacity-checkerboard": "^0.40.2" }, "devDependencies": { - "@spectrum-css/colorloupe": "^4.1.18" + "@spectrum-css/colorloupe": "^4.1.28" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/color-slider/package.json b/packages/color-slider/package.json index 955b3773c4..81e75851f8 100644 --- a/packages/color-slider/package.json +++ b/packages/color-slider/package.json @@ -69,7 +69,7 @@ "@spectrum-web-components/shared": "^0.40.2" }, "devDependencies": { - "@spectrum-css/colorslider": "^5.0.4" + "@spectrum-css/colorslider": "^5.0.14" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/color-wheel/package.json b/packages/color-wheel/package.json index a6d00af981..ba9de68cfc 100644 --- a/packages/color-wheel/package.json +++ b/packages/color-wheel/package.json @@ -68,7 +68,7 @@ "@spectrum-web-components/shared": "^0.40.2" }, "devDependencies": { - "@spectrum-css/colorwheel": "^3.0.41" + "@spectrum-css/colorwheel": "^3.0.51" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/dialog/package.json b/packages/dialog/package.json index bd13996ee2..04dbe41d72 100644 --- a/packages/dialog/package.json +++ b/packages/dialog/package.json @@ -84,7 +84,7 @@ "@spectrum-web-components/underlay": "^0.40.2" }, "devDependencies": { - "@spectrum-css/dialog": "^6.0.68" + "@spectrum-css/dialog": "^9.0.5" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/dialog/src/dialog.css b/packages/dialog/src/dialog.css index a9811c3d7a..c57a07cd58 100644 --- a/packages/dialog/src/dialog.css +++ b/packages/dialog/src/dialog.css @@ -12,6 +12,10 @@ governing permissions and limitations under the License. @import url('./spectrum-dialog.css'); +:host { + --swc-alert-dialog-error-icon-color: var(--spectrum-negative-visual-color); +} + .content { overflow: hidden; } @@ -23,6 +27,14 @@ governing permissions and limitations under the License. ); } +.type-icon { + grid-area: typeIcon; + color: var( + --mod-alert-dialog-error-icon-color, + var(--swc-alert-dialog-error-icon-color) + ); +} + .content[tabindex] { overflow: auto; } diff --git a/packages/dialog/src/spectrum-dialog.css b/packages/dialog/src/spectrum-dialog.css index 4b7d210b3d..08ba496a80 100644 --- a/packages/dialog/src/spectrum-dialog.css +++ b/packages/dialog/src/spectrum-dialog.css @@ -13,117 +13,143 @@ governing permissions and limitations under the License. /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ :host { --spectrum-dialog-fullscreen-header-text-size: 28px; + --spectrum-dialog-min-inline-size: 288px; --spectrum-dialog-confirm-small-width: 400px; --spectrum-dialog-confirm-medium-width: 480px; --spectrum-dialog-confirm-large-width: 640px; - --spectrum-dialog-error-width: var(--spectrum-dialog-confirm-medium-width); - --spectrum-dialog-confirm-hero-height: var( - --spectrum-global-dimension-size-1600 + --spectrum-dialog-confirm-divider-block-spacing-start: var( + --spectrum-spacing-300 ); - --spectrum-dialog-confirm-description-padding: var( - --spectrum-global-dimension-size-25 + --spectrum-dialog-confirm-divider-block-spacing-end: var( + --spectrum-spacing-200 ); - --spectrum-dialog-confirm-description-margin: calc( - var(--spectrum-global-dimension-size-25) * -1 + --spectrum-dialog-confirm-description-text-color: var(--spectrum-gray-800); + --spectrum-dialog-confirm-title-text-color: var(--spectrum-gray-900); + --spectrum-dialog-confirm-description-text-line-height: var( + --spectrum-line-height-100 + ); + --spectrum-dialog-confirm-title-text-line-height: var( + --spectrum-line-height-100 ); - --spectrum-dialog-confirm-footer-padding-top: var( - --spectrum-global-dimension-static-size-500, - 40px + --spectrum-dialog-heading-font-weight: var( + --spectrum-heading-sans-serif-font-weight ); + --spectrum-dialog-confirm-description-padding: var(--spectrum-spacing-50); + --spectrum-dialog-confirm-description-margin: calc( + var(--spectrum-spacing-50) * -1 + ); + --spectrum-dialog-confirm-footer-padding-top: var(--spectrum-spacing-600); --spectrum-dialog-confirm-gap-size: var( - --spectrum-global-dimension-size-200 + --spectrum-component-pill-edge-to-text-100 ); --spectrum-dialog-confirm-buttongroup-padding-top: var( - --spectrum-global-dimension-static-size-500, - 40px + --spectrum-spacing-600 ); --spectrum-dialog-confirm-close-button-size: var( - --spectrum-global-dimension-size-400 + --spectrum-component-height-100 ); --spectrum-dialog-confirm-close-button-padding: calc( - 26px - var(--spectrum-global-dimension-size-175) - ); - --spectrum-dialog-confirm-divider-height: var( - --spectrum-global-dimension-static-size-25, - 2px + 26px - var(--spectrum-component-bottom-to-text-300) ); + --spectrum-dialog-confirm-divider-height: var(--spectrum-spacing-50); } :host { box-sizing: border-box; display: flex; + inline-size: -moz-fit-content; + inline-size: fit-content; + max-inline-size: 100%; max-height: inherit; - max-width: 100%; - min-width: var( - --spectrum-dialog-confirm-min-width, - var(--spectrum-global-dimension-static-size-3600) + min-inline-size: var( + --mod-dialog-min-inline-size, + var(--spectrum-dialog-min-inline-size) ); outline: none; - width: -moz-fit-content; - width: fit-content; } :host([size='s']) { - width: var(--spectrum-dialog-confirm-small-width); + inline-size: var( + --mod-dialog-confirm-small-width, + var(--spectrum-dialog-confirm-small-width) + ); } :host([size='m']) { - width: var(--spectrum-dialog-confirm-medium-width); + inline-size: var( + --mod-dialog-confirm-medium-width, + var(--spectrum-dialog-confirm-medium-width) + ); } :host([size='l']) { - width: var(--spectrum-dialog-confirm-large-width); + inline-size: var( + --mod-dialog-confirm-large-width, + var(--spectrum-dialog-confirm-large-width) + ); } ::slotted([slot='hero']) { background-position: 50%; background-size: cover; border-top-left-radius: var( - --spectrum-dialog-confirm-border-radius, - var(--spectrum-alias-component-border-radius) + --mod-dialog-confirm-border-radius, + var(--spectrum-dialog-confirm-border-radius) ); border-top-right-radius: var( - --spectrum-dialog-confirm-border-radius, - var(--spectrum-alias-component-border-radius) + --mod-dialog-confirm-border-radius, + var(--spectrum-dialog-confirm-border-radius) ); grid-area: hero; - height: var(--spectrum-dialog-confirm-hero-height); + height: var( + --mod-dialog-confirm-hero-height, + var(--spectrum-dialog-confirm-hero-height) + ); overflow: hidden; } .grid { display: grid; - grid-template-areas: 'hero hero hero hero hero hero' '. . . . . .' '. heading header header typeIcon .' '. divider divider divider divider .' '. content content content content .' '. footer footer buttonGroup buttonGroup .' '. . . . . .'; + grid-template-areas: 'hero hero hero hero hero hero' '. . . . . .' '. heading header header header .' '. divider divider divider divider .' '. content content content content .' '. footer footer buttonGroup buttonGroup .' '. . . . . .'; grid-template-columns: - var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0, auto) - var(--spectrum-dialog-confirm-padding); - grid-template-rows: auto var(--spectrum-dialog-confirm-padding) auto auto 1fr auto var( - --spectrum-dialog-confirm-padding + var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ) + auto 1fr auto minmax(0, auto) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-rows: + auto var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ) + auto auto 1fr auto var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) ); - width: 100%; -} -:host([dir='ltr']) ::slotted([slot='heading']) { - padding-right: var(--spectrum-dialog-confirm-gap-size); -} -:host([dir='rtl']) ::slotted([slot='heading']) { - padding-left: var(--spectrum-dialog-confirm-gap-size); + inline-size: 100%; } ::slotted([slot='heading']) { - font-size: var(--spectrum-dialog-confirm-title-text-size); + color: var( + --mod-dialog-confirm-title-text-color, + var(--spectrum-dialog-confirm-title-text-color) + ); + font-size: var( + --mod-dialog-confirm-title-text-size, + var(--spectrum-dialog-confirm-title-text-size) + ); font-weight: var( - --spectrum-dialog-confirm-title-text-font-weight, - var(--spectrum-alias-heading-text-font-weight-regular) + --mod-dialog-heading-font-weight, + var(--spectrum-dialog-heading-font-weight) ); grid-area: heading; line-height: var( - --spectrum-dialog-confirm-title-text-line-height, - var(--spectrum-alias-heading-text-line-height) + --mod-dialog-confirm-title-text-line-height, + var(--spectrum-dialog-confirm-title-text-line-height) ); margin: 0; outline: none; -} -:host([dir='ltr']) .no-header::slotted([slot='heading']) { - padding-right: 0; -} -:host([dir='rtl']) .no-header::slotted([slot='heading']) { - padding-left: 0; + padding-inline-end: var( + --mod-dialog-confirm-gap-size, + var(--spectrum-dialog-confirm-gap-size) + ); } .no-header::slotted([slot='heading']) { grid-area: heading-start/heading-start/header-end/header-end; + padding-inline-end: 0; } .header { align-items: center; @@ -133,88 +159,109 @@ governing permissions and limitations under the License. justify-content: flex-end; outline: none; } -.type-icon { - grid-area: typeIcon; -} .divider { grid-area: divider; - margin-bottom: var( - --spectrum-dialog-confirm-divider-margin-bottom, - var(--spectrum-global-dimension-static-size-200) + inline-size: 100%; + margin-block-end: var( + --mod-dialog-confirm-divider-block-spacing-start, + var(--spectrum-dialog-confirm-divider-block-spacing-start) ); - margin-top: var( - --spectrum-dialog-confirm-divider-margin-top, - var(--spectrum-global-dimension-static-size-150) + margin-block-start: var( + --mod-dialog-confirm-divider-block-spacing-end, + var(--spectrum-dialog-confirm-divider-block-spacing-end) ); - width: 100%; } :host([mode='fullscreen']) [name='heading'] + .divider { - margin-bottom: calc( + margin-block-end: calc( var( - --spectrum-dialog-confirm-divider-margin-bottom, - var(--spectrum-global-dimension-static-size-200) - ) - var(--spectrum-dialog-confirm-description-padding) * 2 + --mod-dialog-confirm-divider-block-spacing-start, + var(--spectrum-dialog-confirm-divider-block-spacing-start) + ) - + var( + --mod-dialog-confirm-description-padding, + var(--spectrum-dialog-confirm-description-padding) + ) * 2 ); } :host([no-divider]) .divider { display: none; } :host([no-divider]) ::slotted([slot='heading']) { - padding-bottom: calc( + padding-block-end: calc( var( - --spectrum-dialog-confirm-divider-margin-top, - var(--spectrum-global-dimension-static-size-150) + --mod-dialog-confirm-divider-block-spacing-end, + var(--spectrum-dialog-confirm-divider-block-spacing-end) ) + var( - --spectrum-dialog-confirm-divider-margin-bottom, - var(--spectrum-global-dimension-static-size-200) + --mod-dialog-confirm-divider-block-spacing-start, + var(--spectrum-dialog-confirm-divider-block-spacing-start) ) + var( - --spectrum-dialog-confirm-divider-height, - var(--spectrum-global-dimension-size-25) + --mod-dialog-confirm-divider-height, + var(--spectrum-dialog-confirm-divider-height) ) ); } .content { -webkit-overflow-scrolling: touch; box-sizing: border-box; - font-size: var(--spectrum-dialog-confirm-description-text-size); + color: var( + --mod-dialog-confirm-description-text-color, + var(--spectrum-dialog-confirm-description-text-color) + ); + font-size: var( + --mod-dialog-confirm-description-text-size, + var(--spectrum-dialog-confirm-description-text-size) + ); font-weight: var( - --spectrum-dialog-confirm-description-text-font-weight, - var(--spectrum-global-font-weight-regular) + --mod-dialog-confirm-description-font-weight, + var(--spectrum-regular-font-weight) ); grid-area: content; line-height: var( - --spectrum-dialog-confirm-description-text-line-height, - var(--spectrum-alias-component-text-line-height) + --mod-dialog-confirm-description-text-line-height, + var(--spectrum-dialog-confirm-description-text-line-height) ); - margin: 0 var(--spectrum-dialog-confirm-description-margin); + margin: 0 + var( + --mod-dialog-confirm-description-margin, + var(--spectrum-dialog-confirm-description-margin) + ); outline: none; overflow-y: auto; - padding: calc(var(--spectrum-dialog-confirm-description-padding) * 2); + padding: calc( + var( + --mod-dialog-confirm-description-padding, + var(--spectrum-dialog-confirm-description-padding) + ) * 2 + ); } .footer { display: flex; flex-wrap: wrap; grid-area: footer; outline: none; - padding-top: var(--spectrum-dialog-confirm-footer-padding-top); + padding-block-start: var( + --mod-dialog-confirm-footer-padding-top, + var(--spectrum-dialog-confirm-footer-padding-top) + ); } .footer > *, .footer > .spectrum-Button + .spectrum-Button { margin-bottom: 0; } -:host([dir='ltr']) .button-group { - padding-left: var(--spectrum-dialog-confirm-gap-size); -} -:host([dir='rtl']) .button-group { - padding-right: var(--spectrum-dialog-confirm-gap-size); -} .button-group { display: flex; grid-area: buttonGroup; justify-content: flex-end; - padding-top: var(--spectrum-dialog-confirm-buttongroup-padding-top); + padding-block-start: var( + --mod-dialog-confirm-buttongroup-padding-top, + var(--spectrum-dialog-confirm-buttongroup-padding-top) + ); + padding-inline-start: var( + --mod-dialog-confirm-gap-size, + var(--spectrum-dialog-confirm-gap-size) + ); } .button-group.button-group--noFooter { grid-area: footer-start/footer-start/buttonGroup-end/buttonGroup-end; @@ -222,60 +269,96 @@ governing permissions and limitations under the License. :host([dismissable]) .grid { grid-template-areas: 'hero hero hero hero hero hero hero' '. . . . . closeButton closeButton' '. heading header header typeIcon closeButton closeButton' '. divider divider divider divider divider .' '. content content content content content .' '. footer footer buttonGroup buttonGroup buttonGroup .' '. . . . . . .'; grid-template-columns: - var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0, auto) - minmax(0, var(--spectrum-dialog-confirm-close-button-size)) var(--spectrum-dialog-confirm-padding); - grid-template-rows: auto var(--spectrum-dialog-confirm-padding) auto auto 1fr auto var( - --spectrum-dialog-confirm-padding + var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ) + auto 1fr auto minmax(0, auto) minmax( + 0, + var( + --mod-dialog-confirm-close-button-size, + var(--spectrum-dialog-confirm-close-button-size) + ) + ) + var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ); + grid-template-rows: + auto var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ) + auto auto 1fr auto var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) ); } :host([dismissable]) .grid .button-group { display: none; } :host([dismissable]) .grid .footer { + color: var( + --mod-dialog-confirm-description-text-color, + var(--spectrum-dialog-confirm-description-text-color) + ); grid-area: footer/footer/buttonGroup/buttonGroup; } -:host([dir='ltr']) .close-button { - margin-right: var(--spectrum-dialog-confirm-close-button-padding); -} -:host([dir='rtl']) .close-button { - margin-left: var(--spectrum-dialog-confirm-close-button-padding); -} .close-button { grid-area: closeButton; - margin-top: var(--spectrum-dialog-confirm-close-button-padding); + margin-block-start: var( + --mod-dialog-confirm-close-button-padding, + var(--spectrum-dialog-confirm-close-button-padding) + ); + margin-inline-end: var( + --mod-dialog-confirm-close-button-padding, + var(--spectrum-dialog-confirm-close-button-padding) + ); place-self: start end; } -:host([error]) { - width: var(--spectrum-dialog-error-width, 90%); -} :host([mode='fullscreen']) { + inline-size: 100%; height: 100%; - width: 100%; } :host([mode='fullscreenTakeover']) { border-radius: 0; + inline-size: 100%; height: 100%; - width: 100%; } :host([mode='fullscreenTakeover']), :host([mode='fullscreen']) { max-height: none; - max-width: none; + max-inline-size: none; } :host([mode='fullscreenTakeover']) .grid, :host([mode='fullscreen']) .grid { display: grid; grid-template-areas: '. . . . .' '. heading header buttonGroup .' '. divider divider divider .' '. content content content .' '. . . . .'; - grid-template-columns: var(--spectrum-dialog-confirm-padding) 1fr auto auto var( - --spectrum-dialog-confirm-padding + grid-template-columns: + var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ) + 1fr auto auto var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) ); - grid-template-rows: var(--spectrum-dialog-confirm-padding) auto auto 1fr var( - --spectrum-dialog-confirm-padding + grid-template-rows: + var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ) + auto auto 1fr var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) ); } :host([mode='fullscreenTakeover']) ::slotted([slot='heading']), :host([mode='fullscreen']) ::slotted([slot='heading']) { - font-size: var(--spectrum-dialog-fullscreen-header-text-size); + font-size: var( + --mod-dialog-fullscreen-header-text-size, + var(--spectrum-dialog-fullscreen-header-text-size) + ); } :host([mode='fullscreenTakeover']) .content, :host([mode='fullscreen']) .content { @@ -285,7 +368,7 @@ governing permissions and limitations under the License. :host([mode='fullscreenTakeover']) .footer, :host([mode='fullscreen']) .button-group, :host([mode='fullscreen']) .footer { - padding-top: 0; + padding-block-start: 0; } :host([mode='fullscreenTakeover']) .footer, :host([mode='fullscreen']) .footer { @@ -298,21 +381,49 @@ governing permissions and limitations under the License. } @media screen and (max-width: 700px) { .grid { - grid-template-areas: 'hero hero hero hero hero hero' '. . . . . .' '. heading heading heading typeIcon .' '. header header header header .' '. divider divider divider divider .' '. content content content content .' '. footer footer buttonGroup buttonGroup .' '. . . . . .'; + grid-template-areas: 'hero hero hero hero hero hero' '. . . . . .' '. heading heading heading heading .' '. header header header header .' '. divider divider divider divider .' '. content content content content .' '. footer footer buttonGroup buttonGroup .' '. . . . . .'; grid-template-columns: - var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0, auto) - var(--spectrum-dialog-confirm-padding); - grid-template-rows: auto var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var( - --spectrum-dialog-confirm-padding + var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ) + auto 1fr auto minmax(0, auto) var(--mod-dialog-confirm-padding-grid, var(--spectrum-dialog-confirm-padding-grid)); + grid-template-rows: + auto var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ) + auto auto auto 1fr auto var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) ); } :host([dismissable]) .grid { - grid-template-areas: 'hero hero hero hero hero hero hero' '. . . . . closeButton closeButton' '. heading heading heading typeIcon closeButton closeButton' '. header header header header header .' '. divider divider divider divider divider .' '. content content content content content .' '. footer footer buttonGroup buttonGroup buttonGroup .' '. . . . . . .'; + grid-template-areas: 'hero hero hero hero hero hero hero' '. . . . . closeButton closeButton' '. heading heading heading heading closeButton closeButton' '. header header header header header .' '. divider divider divider divider divider .' '. content content content content content .' '. footer footer buttonGroup buttonGroup buttonGroup .' '. . . . . . .'; grid-template-columns: - var(--spectrum-dialog-confirm-padding) auto 1fr auto minmax(0, auto) - minmax(0, var(--spectrum-dialog-confirm-close-button-size)) var(--spectrum-dialog-confirm-padding); - grid-template-rows: auto var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var( - --spectrum-dialog-confirm-padding + var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ) + auto 1fr auto minmax(0, auto) minmax( + 0, + var( + --mod-dialog-confirm-close-button-size, + var(--spectrum-dialog-confirm-close-button-size) + ) + ) + var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ); + grid-template-rows: + auto var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ) + auto auto auto 1fr auto var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) ); } .header { @@ -322,20 +433,38 @@ governing permissions and limitations under the License. :host([mode='fullscreen']) .grid { display: grid; grid-template-areas: '. . .' '. heading .' '. header .' '. divider .' '. content .' '. buttonGroup .' '. . .'; - grid-template-columns: var(--spectrum-dialog-confirm-padding) 1fr var( - --spectrum-dialog-confirm-padding + grid-template-columns: + var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ) + 1fr var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) ); - grid-template-rows: var(--spectrum-dialog-confirm-padding) auto auto auto 1fr auto var( - --spectrum-dialog-confirm-padding + grid-template-rows: + var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) + ) + auto auto auto 1fr auto var( + --mod-dialog-confirm-padding-grid, + var(--spectrum-dialog-confirm-padding-grid) ); } :host([mode='fullscreenTakeover']) .button-group, :host([mode='fullscreen']) .button-group { - padding-top: var(--spectrum-dialog-confirm-buttongroup-padding-top); + padding-block-start: var( + --mod-dialog-confirm-buttongroup-padding-top, + var(--spectrum-dialog-confirm-buttongroup-padding-top) + ); } :host([mode='fullscreenTakeover']) ::slotted([slot='heading']), :host([mode='fullscreen']) ::slotted([slot='heading']) { - font-size: var(--spectrum-dialog-confirm-title-text-size); + font-size: var( + --mod-dialog-confirm-title-text-size, + var(--spectrum-dialog-confirm-title-text-size) + ); } } @media (forced-colors: active) { @@ -343,28 +472,3 @@ governing permissions and limitations under the License. border: solid; } } -::slotted([slot='heading']) { - color: var( - --spectrum-dialog-confirm-title-text-color, - var(--spectrum-alias-heading-text-color) - ); -} -.content, -.footer { - color: var( - --spectrum-dialog-confirm-description-text-color, - var(--spectrum-global-color-gray-800) - ); -} -.type-icon { - color: var( - --spectrum-dialog-confirm-icon-color, - var(--spectrum-global-color-gray-900) - ); -} -:host([error]) .type-icon { - color: var( - --spectrum-dialog-error-icon-color, - var(--spectrum-semantic-negative-icon-color) - ); -} diff --git a/packages/divider/package.json b/packages/divider/package.json index 3024ff6647..5b00934515 100644 --- a/packages/divider/package.json +++ b/packages/divider/package.json @@ -60,7 +60,7 @@ "@spectrum-web-components/base": "^0.40.2" }, "devDependencies": { - "@spectrum-css/divider": "^2.1.25" + "@spectrum-css/divider": "^2.1.35" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/dropzone/package.json b/packages/dropzone/package.json index c5145515c4..be8e68fed1 100644 --- a/packages/dropzone/package.json +++ b/packages/dropzone/package.json @@ -60,7 +60,7 @@ "@spectrum-web-components/base": "^0.40.2" }, "devDependencies": { - "@spectrum-css/dropzone": "^5.0.30" + "@spectrum-css/dropzone": "^5.0.31" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/field-group/package.json b/packages/field-group/package.json index 49a83a3ffc..830b2115f3 100644 --- a/packages/field-group/package.json +++ b/packages/field-group/package.json @@ -61,7 +61,7 @@ "@spectrum-web-components/help-text": "^0.40.2" }, "devDependencies": { - "@spectrum-css/fieldgroup": "^4.0.72" + "@spectrum-css/fieldgroup": "^4.1.1" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/field-label/package.json b/packages/field-label/package.json index 92dc238a70..e768bc520b 100644 --- a/packages/field-label/package.json +++ b/packages/field-label/package.json @@ -64,7 +64,7 @@ "@spectrum-web-components/shared": "^0.40.2" }, "devDependencies": { - "@spectrum-css/fieldlabel": "^7.0.33" + "@spectrum-css/fieldlabel": "^7.2.1" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/field-label/src/spectrum-field-label.css b/packages/field-label/src/spectrum-field-label.css index 39ab070a54..22ee6f238f 100644 --- a/packages/field-label/src/spectrum-field-label.css +++ b/packages/field-label/src/spectrum-field-label.css @@ -114,7 +114,6 @@ governing permissions and limitations under the License. var(--spectrum-fieldlabel-bottom-to-text) ); padding-inline: 0; - vertical-align: top; } :host(:lang(ja)), :host(:lang(ko)), @@ -146,6 +145,7 @@ governing permissions and limitations under the License. --mod-fieldlabel-side-padding-right, var(--spectrum-fieldlabel-side-padding-right) ); + vertical-align: top; } :host([side-aligned='end']) { text-align: end; diff --git a/packages/help-text/package.json b/packages/help-text/package.json index 4cc7a60890..1144710776 100644 --- a/packages/help-text/package.json +++ b/packages/help-text/package.json @@ -81,7 +81,7 @@ "@spectrum-web-components/icons-workflow": "^0.40.2" }, "devDependencies": { - "@spectrum-css/helptext": "^4.0.54" + "@spectrum-css/helptext": "^4.0.64" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/help-text/src/spectrum-help-text.css b/packages/help-text/src/spectrum-help-text.css index 65c44eae04..781de033d2 100644 --- a/packages/help-text/src/spectrum-help-text.css +++ b/packages/help-text/src/spectrum-help-text.css @@ -138,14 +138,21 @@ governing permissions and limitations under the License. --mod-helptext-font-size, var(--spectrum-helptext-font-size) ); - min-height: var( + min-block-size: var( --mod-helptext-min-height, var(--spectrum-helptext-min-height) ); } .icon { + block-size: var( + --mod-helptext-icon-size, + var(--spectrum-helptext-icon-size) + ); flex-shrink: 0; - height: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size)); + inline-size: var( + --mod-helptext-icon-size, + var(--spectrum-helptext-icon-size) + ); margin-inline-end: var( --mod-helptext-text-to-visual, var(--spectrum-helptext-text-to-visual) @@ -158,7 +165,6 @@ governing permissions and limitations under the License. --mod-helptext-top-to-workflow-icon, var(--spectrum-helptext-top-to-workflow-icon) ); - width: var(--mod-helptext-icon-size, var(--spectrum-helptext-icon-size)); } .text { line-height: var( diff --git a/packages/icon/package.json b/packages/icon/package.json index bfe414807b..cb5bb436ad 100644 --- a/packages/icon/package.json +++ b/packages/icon/package.json @@ -75,7 +75,7 @@ "@spectrum-web-components/iconset": "^0.40.2" }, "devDependencies": { - "@spectrum-css/icon": "^4.0.3" + "@spectrum-css/icon": "^5.0.0" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/icons-ui/package.json b/packages/icons-ui/package.json index c3193ad700..ff01499171 100644 --- a/packages/icons-ui/package.json +++ b/packages/icons-ui/package.json @@ -49,7 +49,7 @@ "@spectrum-web-components/iconset": "^0.40.2" }, "devDependencies": { - "@spectrum-css/ui-icons": "^1.0.0", + "@spectrum-css/ui-icons": "^1.1.0", "case": "^1.6.1", "cheerio": "^1.0.0-rc.2", "fast-glob": "^3.2.12", diff --git a/packages/icons-workflow/package.json b/packages/icons-workflow/package.json index 96294aa681..9e230739d3 100644 --- a/packages/icons-workflow/package.json +++ b/packages/icons-workflow/package.json @@ -49,7 +49,7 @@ }, "devDependencies": { "@adobe/spectrum-css-workflow-icons": "^1.5.4", - "@spectrum-css/icon": "^4.0.3", + "@spectrum-css/icon": "^5.0.0", "case": "^1.6.1", "cheerio": "^1.0.0-rc.2", "fast-glob": "^3.2.12", diff --git a/packages/icons/src/icons-large.svg.ts b/packages/icons/src/icons-large.svg.ts index 37cb67c5e0..1b57e9c260 100644 --- a/packages/icons/src/icons-large.svg.ts +++ b/packages/icons/src/icons-large.svg.ts @@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { svg } from '@spectrum-web-components/base'; -export default svg``; +export default svg``; diff --git a/packages/icons/src/icons-medium.svg.ts b/packages/icons/src/icons-medium.svg.ts index 631b3e4d71..457c798e11 100644 --- a/packages/icons/src/icons-medium.svg.ts +++ b/packages/icons/src/icons-medium.svg.ts @@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { svg } from '@spectrum-web-components/base'; -export default svg``; +export default svg``; diff --git a/packages/illustrated-message/package.json b/packages/illustrated-message/package.json index b5ec8fdcd7..b0367856ef 100644 --- a/packages/illustrated-message/package.json +++ b/packages/illustrated-message/package.json @@ -61,7 +61,7 @@ "@spectrum-web-components/styles": "^0.40.2" }, "devDependencies": { - "@spectrum-css/illustratedmessage": "^6.0.29" + "@spectrum-css/illustratedmessage": "^6.0.31" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/infield-button/package.json b/packages/infield-button/package.json index 0c1245de36..dd2e927bac 100644 --- a/packages/infield-button/package.json +++ b/packages/infield-button/package.json @@ -61,7 +61,7 @@ "@spectrum-web-components/button": "^0.40.2" }, "devDependencies": { - "@spectrum-css/infieldbutton": "^4.0.1" + "@spectrum-css/infieldbutton": "^4.0.6" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/infield-button/src/spectrum-infield-button.css b/packages/infield-button/src/spectrum-infield-button.css index eb58a2fdef..011a30df67 100644 --- a/packages/infield-button/src/spectrum-infield-button.css +++ b/packages/infield-button/src/spectrum-infield-button.css @@ -48,6 +48,7 @@ governing permissions and limitations under the License. --spectrum-infield-button-icon-color-key-focus: var( --spectrum-neutral-content-color-key-focus ); + --spectrum-infield-button-fill-justify-content: center; } :host([disabled]) { --mod-infield-button-background-color: var( @@ -296,28 +297,24 @@ governing permissions and limitations under the License. var(--spectrum-infield-button-icon-color-down) ); } -:host(.focus-visible) .fill, -:host(:focus) .fill { +:host(.focus-visible) .fill { background-color: var( --mod-infield-button-background-color-key-focus, var(--spectrum-infield-button-background-color-key-focus) ); } -:host(:focus) .fill, :host(:focus-visible) .fill { background-color: var( --mod-infield-button-background-color-key-focus, var(--spectrum-infield-button-background-color-key-focus) ); } -:host(.focus-visible) ::slotted(*), -:host(:focus) ::slotted(*) { +:host(.focus-visible) ::slotted(*) { color: var( --mod-infield-button-icon-color-key-focus, var(--spectrum-infield-button-icon-color-key-focus) ); } -:host(:focus) ::slotted(*), :host(:focus-visible) ::slotted(*) { color: var( --mod-infield-button-icon-color-key-focus, @@ -327,7 +324,10 @@ governing permissions and limitations under the License. .fill { align-items: center; display: flex; - justify-content: center; + justify-content: var( + --mod-infield-button-fill-justify-content, + var(--spectrum-infield-button-fill-justify-content) + ); transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out; } @@ -422,6 +422,20 @@ governing permissions and limitations under the License. ); } :host([block='end']) .fill { + border-block-end-width: var( + --mod-infield-button-stacked-bottom-border-block-end-width, + var( + --mod-infield-button-border-width, + var(--spectrum-infield-button-border-width) + ) + ); + border-end-end-radius: var( + --mod-infield-button-stacked-bottom-border-radius-end-end, + var( + --mod-infield-button-border-radius, + var(--spectrum-infield-button-border-radius) + ) + ); border-end-start-radius: var( --mod-infield-button-stacked-bottom-border-radius-end-start, var(--spectrum-infield-button-stacked-bottom-border-radius-end-start) diff --git a/packages/link/package.json b/packages/link/package.json index 7b4fa10fab..19ad6e9fa1 100644 --- a/packages/link/package.json +++ b/packages/link/package.json @@ -61,7 +61,7 @@ "@spectrum-web-components/shared": "^0.40.2" }, "devDependencies": { - "@spectrum-css/link": "^4.0.65" + "@spectrum-css/link": "^4.0.75" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/menu/package.json b/packages/menu/package.json index 6e9450515e..7443f87b5f 100644 --- a/packages/menu/package.json +++ b/packages/menu/package.json @@ -95,7 +95,7 @@ "@spectrum-web-components/shared": "^0.40.2" }, "devDependencies": { - "@spectrum-css/menu": "^5.0.10" + "@spectrum-css/menu": "^5.2.1" }, "types": "./src/index.d.ts", "customElements": "custom-elements.json", diff --git a/packages/menu/src/menu-item.css b/packages/menu/src/menu-item.css index 84d1e55015..c33b71afc8 100644 --- a/packages/menu/src/menu-item.css +++ b/packages/menu/src/menu-item.css @@ -50,3 +50,7 @@ governing permissions and limitations under the License. width: max-content; max-width: 100%; } + +:host([no-wrap]) #label { + display: block; +} diff --git a/packages/menu/src/spectrum-checkmark.css b/packages/menu/src/spectrum-checkmark.css index 05322d7f83..733ae70bc5 100644 --- a/packages/menu/src/spectrum-checkmark.css +++ b/packages/menu/src/spectrum-checkmark.css @@ -19,11 +19,7 @@ governing permissions and limitations under the License. var(--spectrum-menu-checkmark-icon-color-default) ) ); - align-self: start; - block-size: var( - --mod-menu-item-checkmark-height, - var(--spectrum-menu-item-checkmark-height) - ); + align-self: center; color: var( --highcontrast-menu-checkmark-icon-color-default, var( @@ -35,6 +31,50 @@ governing permissions and limitations under the License. --mod-menu-checkmark-display, var(--spectrum-menu-checkmark-display) ); + opacity: 1; +} +.spectrum-Menu-back.focus-visible { + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * + var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); +} +.spectrum-Menu-back:focus-visible { + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * + var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); +} +.checkmark { + align-self: start; + block-size: var( + --mod-menu-item-checkmark-height, + var(--spectrum-menu-item-checkmark-height) + ); grid-area: checkmarkArea; inline-size: var( --mod-menu-item-checkmark-width, @@ -54,5 +94,78 @@ governing permissions and limitations under the License. --mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control) ); - opacity: 1; +} +.spectrum-Menu-back { + align-items: center; + display: flex; + flex-flow: wrap; + padding-block: var(--mod-menu-back-padding-block-start, 0) + var(--mod-menu-back-padding-block-end, 0); + padding-inline: var(--mod-menu-back-padding-inline-start, 0) + var( + --mod-menu-back-padding-inline-end, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); +} +.spectrum-Menu-backButton { + background: none; + border: 0; + cursor: pointer; + display: inline-flex; + margin: 0; + padding: 0; +} +.spectrum-Menu-backButton.focus-visible { + outline: var(--spectrum-focus-indicator-thickness) solid + var(--spectrum-focus-indicator-color); + outline-offset: calc( + (var(--spectrum-focus-indicator-thickness) + 1px) * -1 + ); +} +.spectrum-Menu-backButton:focus-visible { + outline: var(--spectrum-focus-indicator-thickness) solid + var(--spectrum-focus-indicator-color); + outline-offset: calc( + (var(--spectrum-focus-indicator-thickness) + 1px) * -1 + ); +} +.spectrum-Menu-backHeading { + color: var( + --highcontrast-menu-item-color-default, + var( + --mod-menu-back-heading-color, + var(--spectrum-menu-section-header-color) + ) + ); + display: block; + font-size: var( + --mod-menu-section-header-font-size, + var(--spectrum-menu-section-header-font-size) + ); + font-weight: var( + --mod-menu-section-header-font-weight, + var(--spectrum-menu-section-header-font-weight) + ); + line-height: var( + --mod-menu-section-header-line-height, + var(--spectrum-menu-section-header-line-height) + ); +} +.spectrum-Menu-backIcon { + fill: var( + --highcontrast-menu-item-color-default, + var(--mod-menu-back-icon-color-default) + ); + color: var( + --highcontrast-menu-item-color-default, + var(--mod-menu-back-icon-color-default) + ); + margin-block: var( + --mod-menu-back-icon-margin-block, + var(--spectrum-menu-back-icon-margin) + ); + margin-inline: var( + --mod-menu-back-icon-margin-inline, + var(--spectrum-menu-back-icon-margin) + ); } diff --git a/packages/menu/src/spectrum-chevron.css b/packages/menu/src/spectrum-chevron.css index c49410f9e2..8fc4f9ca8e 100644 --- a/packages/menu/src/spectrum-chevron.css +++ b/packages/menu/src/spectrum-chevron.css @@ -11,18 +11,126 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.spectrum-Menu-back.focus-visible { + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * + var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); +} +.spectrum-Menu-back:focus-visible { + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * + var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); +} .chevron { align-self: center; block-size: var(--spectrum-menu-item-checkmark-height); grid-area: chevronArea; - height: var(--spectrum-menu-item-checkmark-height); inline-size: var(--spectrum-menu-item-checkmark-width); margin-inline-end: var( --mod-menu-item-text-to-control, var(--spectrum-menu-item-text-to-control) ); - width: var(--spectrum-menu-item-checkmark-width); } :host([dir='rtl']) .chevron { transform: rotate(-180deg); } +.spectrum-Menu-back { + align-items: center; + display: flex; + flex-flow: wrap; + padding-block: var(--mod-menu-back-padding-block-start, 0) + var(--mod-menu-back-padding-block-end, 0); + padding-inline: var(--mod-menu-back-padding-inline-start, 0) + var( + --mod-menu-back-padding-inline-end, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); +} +.spectrum-Menu-backButton { + background: none; + border: 0; + cursor: pointer; + display: inline-flex; + margin: 0; + padding: 0; +} +.spectrum-Menu-backButton.focus-visible { + outline: var(--spectrum-focus-indicator-thickness) solid + var(--spectrum-focus-indicator-color); + outline-offset: calc( + (var(--spectrum-focus-indicator-thickness) + 1px) * -1 + ); +} +.spectrum-Menu-backButton:focus-visible { + outline: var(--spectrum-focus-indicator-thickness) solid + var(--spectrum-focus-indicator-color); + outline-offset: calc( + (var(--spectrum-focus-indicator-thickness) + 1px) * -1 + ); +} +.spectrum-Menu-backHeading { + color: var( + --highcontrast-menu-item-color-default, + var( + --mod-menu-back-heading-color, + var(--spectrum-menu-section-header-color) + ) + ); + display: block; + font-size: var( + --mod-menu-section-header-font-size, + var(--spectrum-menu-section-header-font-size) + ); + font-weight: var( + --mod-menu-section-header-font-weight, + var(--spectrum-menu-section-header-font-weight) + ); + line-height: var( + --mod-menu-section-header-line-height, + var(--spectrum-menu-section-header-line-height) + ); +} +.spectrum-Menu-backIcon { + fill: var( + --highcontrast-menu-item-color-default, + var(--mod-menu-back-icon-color-default) + ); + color: var( + --highcontrast-menu-item-color-default, + var(--mod-menu-back-icon-color-default) + ); + margin-block: var( + --mod-menu-back-icon-margin-block, + var(--spectrum-menu-back-icon-margin) + ); + margin-inline: var( + --mod-menu-back-icon-margin-inline, + var(--spectrum-menu-back-icon-margin) + ); +} diff --git a/packages/menu/src/spectrum-menu-divider.css b/packages/menu/src/spectrum-menu-divider.css index 279b55fdbf..5cda5a85af 100644 --- a/packages/menu/src/spectrum-menu-divider.css +++ b/packages/menu/src/spectrum-menu-divider.css @@ -30,3 +30,113 @@ governing permissions and limitations under the License. ); overflow: visible; } +.spectrum-Menu-back.focus-visible { + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * + var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); +} +.spectrum-Menu-back:focus-visible { + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * + var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); +} +.spectrum-Menu-back { + align-items: center; + display: flex; + flex-flow: wrap; + padding-block: var(--mod-menu-back-padding-block-start, 0) + var(--mod-menu-back-padding-block-end, 0); + padding-inline: var(--mod-menu-back-padding-inline-start, 0) + var( + --mod-menu-back-padding-inline-end, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); +} +.spectrum-Menu-backButton { + background: none; + border: 0; + cursor: pointer; + display: inline-flex; + margin: 0; + padding: 0; +} +.spectrum-Menu-backButton.focus-visible { + outline: var(--spectrum-focus-indicator-thickness) solid + var(--spectrum-focus-indicator-color); + outline-offset: calc( + (var(--spectrum-focus-indicator-thickness) + 1px) * -1 + ); +} +.spectrum-Menu-backButton:focus-visible { + outline: var(--spectrum-focus-indicator-thickness) solid + var(--spectrum-focus-indicator-color); + outline-offset: calc( + (var(--spectrum-focus-indicator-thickness) + 1px) * -1 + ); +} +.spectrum-Menu-backHeading { + color: var( + --highcontrast-menu-item-color-default, + var( + --mod-menu-back-heading-color, + var(--spectrum-menu-section-header-color) + ) + ); + display: block; + font-size: var( + --mod-menu-section-header-font-size, + var(--spectrum-menu-section-header-font-size) + ); + font-weight: var( + --mod-menu-section-header-font-weight, + var(--spectrum-menu-section-header-font-weight) + ); + line-height: var( + --mod-menu-section-header-line-height, + var(--spectrum-menu-section-header-line-height) + ); +} +.spectrum-Menu-backIcon { + fill: var( + --highcontrast-menu-item-color-default, + var(--mod-menu-back-icon-color-default) + ); + color: var( + --highcontrast-menu-item-color-default, + var(--mod-menu-back-icon-color-default) + ); + margin-block: var( + --mod-menu-back-icon-margin-block, + var(--spectrum-menu-back-icon-margin) + ); + margin-inline: var( + --mod-menu-back-icon-margin-inline, + var(--spectrum-menu-back-icon-margin) + ); +} diff --git a/packages/menu/src/spectrum-menu-item.css b/packages/menu/src/spectrum-menu-item.css index 6b0088c43f..4194aae0a8 100644 --- a/packages/menu/src/spectrum-menu-item.css +++ b/packages/menu/src/spectrum-menu-item.css @@ -85,6 +85,32 @@ governing permissions and limitations under the License. -webkit-text-decoration: none; text-decoration: none; } +.spectrum-Menu-itemCheckbox { + --mod-checkbox-top-to-text: 0; + --mod-checkbox-text-to-control: 0; + min-block-size: 0; +} +.spectrum-Menu-itemCheckbox .spectrum-Checkbox-box { + margin-block-end: 0; + margin-block-start: var( + --mod-menu-item-top-to-checkbox, + var(--spectrum-menu-item-top-to-checkbox) + ); + margin-inline-end: var( + --mod-menu-item-text-to-control, + var(--spectrum-menu-item-text-to-control) + ); +} +.spectrum-Menu-itemSwitch { + min-block-size: 0; +} +.spectrum-Menu-itemSwitch .spectrum-Switch-switch { + margin-block-end: 0; + margin-block-start: var( + --mod-menu-item-top-to-action, + var(--spectrum-menu-item-top-to-action) + ); +} :host { display: grid; grid-template: '. chevronAreaCollapsible . iconArea sectionHeadingArea . . .' 1fr 'selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn' '. . . . descriptionArea . . .' '. . . . submenuArea . . .' / auto auto auto auto 1fr auto auto auto; @@ -187,7 +213,8 @@ governing permissions and limitations under the License. ) ); } -:host([focused]) { +:host([focused]), +:host([focused]) .spectrum-Menu-back { box-shadow: inset calc( var( @@ -376,68 +403,6 @@ governing permissions and limitations under the License. ) ); } -:host([aria-disabled='true']), -:host([disabled]) { - background-color: #0000; -} -:host([aria-disabled='true']) #label, -:host([disabled]) #label { - color: var( - --highcontrast-menu-item-color-disabled, - var( - --mod-menu-item-label-content-color-disabled, - var(--spectrum-menu-item-label-content-color-disabled) - ) - ); -} -:host([aria-disabled='true']) [name='description']::slotted(*), -:host([disabled]) [name='description']::slotted(*) { - color: var( - --highcontrast-menu-item-color-disabled, - var( - --mod-menu-item-description-color-disabled, - var(--spectrum-menu-item-description-color-disabled) - ) - ); -} -:host([aria-disabled='true']) ::slotted([slot='icon']), -:host([disabled]) ::slotted([slot='icon']) { - fill: var( - --highcontrast-menu-item-color-disabled, - var( - --mod-menu-item-label-icon-color-disabled, - var(--spectrum-menu-item-label-icon-color-disabled) - ) - ); - color: var( - --highcontrast-menu-item-color-disabled, - var( - --mod-menu-item-label-icon-color-disabled, - var(--spectrum-menu-item-label-icon-color-disabled) - ) - ); -} -:host([aria-disabled='true']:hover), -:host([disabled]:hover) { - cursor: default; -} -:host([aria-disabled='true']:hover) ::slotted([slot='icon']), -:host([disabled]:hover) ::slotted([slot='icon']) { - fill: var( - --highcontrast-menu-item-color-disabled, - var( - --mod-menu-item-label-icon-color-disabled, - var(--spectrum-menu-item-label-icon-color-disabled) - ) - ); - color: var( - --highcontrast-menu-item-color-disabled, - var( - --mod-menu-item-label-icon-color-disabled, - var(--spectrum-menu-item-label-icon-color-disabled) - ) - ); -} ::slotted([slot='icon']) { align-self: start; grid-area: iconArea; @@ -446,10 +411,11 @@ governing permissions and limitations under the License. align-self: start; grid-area: checkmarkArea; } -.menu-itemSelection { +.spectrum-Menu-itemSelection { grid-area: selectedArea; } #label { + align-items: flex-start; color: var( --highcontrast-menu-item-color-default, var( @@ -457,6 +423,7 @@ governing permissions and limitations under the License. var(--spectrum-menu-item-label-content-color-default) ) ); + display: flex; font-size: var( --mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size) @@ -467,15 +434,18 @@ governing permissions and limitations under the License. grid-area: valueArea; } .spectrum-Menu-itemActions { + align-self: start; grid-area: actionsArea; + margin-inline-start: var( + --mod-menu-item-label-to-value-area-min-spacing, + var(--spectrum-menu-item-label-to-value-area-min-spacing) + ); } .chevron { align-self: center; block-size: var(--spectrum-menu-item-checkmark-height); grid-area: chevronArea; - height: var(--spectrum-menu-item-checkmark-height); inline-size: var(--spectrum-menu-item-checkmark-width); - width: var(--spectrum-menu-item-checkmark-width); } .spectrum-Menu-item--collapsible .chevron { grid-area: chevronAreaCollapsible; @@ -571,11 +541,11 @@ governing permissions and limitations under the License. --mod-menu-item-label-font-size, var(--spectrum-menu-item-label-font-size) ); - justify-self: end; margin-inline-start: var( --mod-menu-item-label-to-value-area-min-spacing, var(--spectrum-menu-item-label-to-value-area-min-spacing) ); + place-self: start end; } :host([no-wrap]) #label { overflow: hidden; @@ -746,3 +716,132 @@ governing permissions and limitations under the License. ) ); } +:host([aria-disabled='true']), +:host([disabled]) { + background-color: #0000; +} +:host([aria-disabled='true']) #label, +:host([disabled]) #label { + color: var( + --highcontrast-menu-item-color-disabled, + var( + --mod-menu-item-label-content-color-disabled, + var(--spectrum-menu-item-label-content-color-disabled) + ) + ); +} +:host([aria-disabled='true']) [name='description']::slotted(*), +:host([disabled]) [name='description']::slotted(*) { + color: var( + --highcontrast-menu-item-color-disabled, + var( + --mod-menu-item-description-color-disabled, + var(--spectrum-menu-item-description-color-disabled) + ) + ); +} +:host([aria-disabled='true']) ::slotted([slot='icon']), +:host([disabled]) ::slotted([slot='icon']) { + fill: var( + --highcontrast-menu-item-color-disabled, + var( + --mod-menu-item-label-icon-color-disabled, + var(--spectrum-menu-item-label-icon-color-disabled) + ) + ); + color: var( + --highcontrast-menu-item-color-disabled, + var( + --mod-menu-item-label-icon-color-disabled, + var(--spectrum-menu-item-label-icon-color-disabled) + ) + ); +} +:host([aria-disabled='true']:hover), +:host([disabled]:hover) { + cursor: default; +} +:host([aria-disabled='true']:hover) ::slotted([slot='icon']), +:host([disabled]:hover) ::slotted([slot='icon']) { + fill: var( + --highcontrast-menu-item-color-disabled, + var( + --mod-menu-item-label-icon-color-disabled, + var(--spectrum-menu-item-label-icon-color-disabled) + ) + ); + color: var( + --highcontrast-menu-item-color-disabled, + var( + --mod-menu-item-label-icon-color-disabled, + var(--spectrum-menu-item-label-icon-color-disabled) + ) + ); +} +.spectrum-Menu-back { + align-items: center; + display: flex; + flex-flow: wrap; + padding-block: var(--mod-menu-back-padding-block-start, 0) + var(--mod-menu-back-padding-block-end, 0); + padding-inline: var(--mod-menu-back-padding-inline-start, 0) + var( + --mod-menu-back-padding-inline-end, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); +} +.spectrum-Menu-backButton { + background: none; + border: 0; + cursor: pointer; + display: inline-flex; + margin: 0; + padding: 0; +} +:host([focused]) .spectrum-Menu-backButton { + outline: var(--spectrum-focus-indicator-thickness) solid + var(--spectrum-focus-indicator-color); + outline-offset: calc( + (var(--spectrum-focus-indicator-thickness) + 1px) * -1 + ); +} +.spectrum-Menu-backHeading { + color: var( + --highcontrast-menu-item-color-default, + var( + --mod-menu-back-heading-color, + var(--spectrum-menu-section-header-color) + ) + ); + display: block; + font-size: var( + --mod-menu-section-header-font-size, + var(--spectrum-menu-section-header-font-size) + ); + font-weight: var( + --mod-menu-section-header-font-weight, + var(--spectrum-menu-section-header-font-weight) + ); + line-height: var( + --mod-menu-section-header-line-height, + var(--spectrum-menu-section-header-line-height) + ); +} +.spectrum-Menu-backIcon { + fill: var( + --highcontrast-menu-item-color-default, + var(--mod-menu-back-icon-color-default) + ); + color: var( + --highcontrast-menu-item-color-default, + var(--mod-menu-back-icon-color-default) + ); + margin-block: var( + --mod-menu-back-icon-margin-block, + var(--spectrum-menu-back-icon-margin) + ); + margin-inline: var( + --mod-menu-back-icon-margin-inline, + var(--spectrum-menu-back-icon-margin) + ); +} diff --git a/packages/menu/src/spectrum-menu-sectionHeading.css b/packages/menu/src/spectrum-menu-sectionHeading.css index 1566dd769f..17ab9ec74b 100644 --- a/packages/menu/src/spectrum-menu-sectionHeading.css +++ b/packages/menu/src/spectrum-menu-sectionHeading.css @@ -11,6 +11,42 @@ governing permissions and limitations under the License. */ /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */ +.spectrum-Menu-back.focus-visible { + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * + var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); +} +.spectrum-Menu-back:focus-visible { + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * + var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); +} .header { color: var( --highcontrast-menu-item-color-default, @@ -56,3 +92,80 @@ governing permissions and limitations under the License. var(--spectrum-menu-item-label-inline-edge-to-content) ); } +.spectrum-Menu-back { + align-items: center; + display: flex; + flex-flow: wrap; + padding-block: var(--mod-menu-back-padding-block-start, 0) + var(--mod-menu-back-padding-block-end, 0); + padding-inline: var(--mod-menu-back-padding-inline-start, 0) + var( + --mod-menu-back-padding-inline-end, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); +} +.spectrum-Menu-back .header { + padding: 0; +} +.spectrum-Menu-backButton { + background: none; + border: 0; + cursor: pointer; + display: inline-flex; + margin: 0; + padding: 0; +} +.spectrum-Menu-backButton.focus-visible { + outline: var(--spectrum-focus-indicator-thickness) solid + var(--spectrum-focus-indicator-color); + outline-offset: calc( + (var(--spectrum-focus-indicator-thickness) + 1px) * -1 + ); +} +.spectrum-Menu-backButton:focus-visible { + outline: var(--spectrum-focus-indicator-thickness) solid + var(--spectrum-focus-indicator-color); + outline-offset: calc( + (var(--spectrum-focus-indicator-thickness) + 1px) * -1 + ); +} +.spectrum-Menu-backHeading { + color: var( + --highcontrast-menu-item-color-default, + var( + --mod-menu-back-heading-color, + var(--spectrum-menu-section-header-color) + ) + ); + display: block; + font-size: var( + --mod-menu-section-header-font-size, + var(--spectrum-menu-section-header-font-size) + ); + font-weight: var( + --mod-menu-section-header-font-weight, + var(--spectrum-menu-section-header-font-weight) + ); + line-height: var( + --mod-menu-section-header-line-height, + var(--spectrum-menu-section-header-line-height) + ); +} +.spectrum-Menu-backIcon { + fill: var( + --highcontrast-menu-item-color-default, + var(--mod-menu-back-icon-color-default) + ); + color: var( + --highcontrast-menu-item-color-default, + var(--mod-menu-back-icon-color-default) + ); + margin-block: var( + --mod-menu-back-icon-margin-block, + var(--spectrum-menu-back-icon-margin) + ); + margin-inline: var( + --mod-menu-back-icon-margin-inline, + var(--spectrum-menu-back-icon-margin) + ); +} diff --git a/packages/menu/src/spectrum-menu.css b/packages/menu/src/spectrum-menu.css index 7146de5acf..12218cef69 100644 --- a/packages/menu/src/spectrum-menu.css +++ b/packages/menu/src/spectrum-menu.css @@ -46,6 +46,8 @@ governing permissions and limitations under the License. --spectrum-menu-item-top-to-checkmark: var( --spectrum-menu-item-top-to-selected-icon-medium ); + --spectrum-menu-item-top-to-action: var(--spectrum-spacing-50); + --spectrum-menu-item-top-to-checkbox: var(--spectrum-spacing-50); --spectrum-menu-item-label-line-height: var(--spectrum-line-height-100); --spectrum-menu-item-label-line-height-cjk: var( --spectrum-cjk-line-height-100 @@ -161,6 +163,9 @@ governing permissions and limitations under the License. --spectrum-menu-checkmark-display: var( --spectrum-menu-checkmark-display-shown ); + --spectrum-menu-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-medium + ); --spectrum-menu-item-collapsible-has-icon-submenu-item-padding-x-start: calc( var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + @@ -211,6 +216,9 @@ governing permissions and limitations under the License. --spectrum-menu-item-top-to-checkmark: var( --spectrum-menu-item-top-to-selected-icon-small ); + --spectrum-menu-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-small + ); } :host([size='l']) { --spectrum-menu-item-min-height: var(--spectrum-component-height-200); @@ -247,6 +255,9 @@ governing permissions and limitations under the License. --spectrum-menu-item-top-to-checkmark: var( --spectrum-menu-item-top-to-selected-icon-large ); + --spectrum-menu-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-large + ); } :host([size='xl']) { --spectrum-menu-item-min-height: var(--spectrum-component-height-300); @@ -283,6 +294,9 @@ governing permissions and limitations under the License. --spectrum-menu-item-top-to-checkmark: var( --spectrum-menu-item-top-to-selected-icon-extra-large ); + --spectrum-menu-back-icon-margin: var( + --spectrum-navigational-indicator-top-to-back-icon-extra-large + ); } @media (forced-colors: active) { :host { @@ -306,6 +320,7 @@ governing permissions and limitations under the License. :host { box-sizing: border-box; display: inline-block; + inline-size: var(--mod-menu-inline-size, auto); list-style-type: none; margin: 0; overflow: auto; @@ -352,6 +367,42 @@ li:not(::slotted(sp-menu-item), .menu-divider) { padding: 0; position: relative; } +.spectrum-Menu-back.focus-visible { + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * + var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); +} +.spectrum-Menu-back:focus-visible { + box-shadow: inset + calc( + var( + --mod-menu-item-focus-indicator-width, + var(--spectrum-menu-item-focus-indicator-width) + ) * + var(--spectrum-menu-item-focus-indicator-direction-scalar, 1) + ) + 0 0 0 + var( + --highcontrast-menu-item-focus-indicator-color, + var( + --mod-menu-item-focus-indicator-color, + var(--spectrum-menu-item-focus-indicator-color) + ) + ); +} .spectrum-Menu-sectionHeading { color: var( --highcontrast-menu-item-color-default, @@ -397,3 +448,80 @@ li:not(::slotted(sp-menu-item), .menu-divider) { var(--spectrum-menu-item-label-inline-edge-to-content) ); } +.spectrum-Menu-back { + align-items: center; + display: flex; + flex-flow: wrap; + padding-block: var(--mod-menu-back-padding-block-start, 0) + var(--mod-menu-back-padding-block-end, 0); + padding-inline: var(--mod-menu-back-padding-inline-start, 0) + var( + --mod-menu-back-padding-inline-end, + var(--spectrum-menu-item-label-inline-edge-to-content) + ); +} +.spectrum-Menu-back .spectrum-Menu-sectionHeading { + padding: 0; +} +.spectrum-Menu-backButton { + background: none; + border: 0; + cursor: pointer; + display: inline-flex; + margin: 0; + padding: 0; +} +.spectrum-Menu-backButton.focus-visible { + outline: var(--spectrum-focus-indicator-thickness) solid + var(--spectrum-focus-indicator-color); + outline-offset: calc( + (var(--spectrum-focus-indicator-thickness) + 1px) * -1 + ); +} +.spectrum-Menu-backButton:focus-visible { + outline: var(--spectrum-focus-indicator-thickness) solid + var(--spectrum-focus-indicator-color); + outline-offset: calc( + (var(--spectrum-focus-indicator-thickness) + 1px) * -1 + ); +} +.spectrum-Menu-backHeading { + color: var( + --highcontrast-menu-item-color-default, + var( + --mod-menu-back-heading-color, + var(--spectrum-menu-section-header-color) + ) + ); + display: block; + font-size: var( + --mod-menu-section-header-font-size, + var(--spectrum-menu-section-header-font-size) + ); + font-weight: var( + --mod-menu-section-header-font-weight, + var(--spectrum-menu-section-header-font-weight) + ); + line-height: var( + --mod-menu-section-header-line-height, + var(--spectrum-menu-section-header-line-height) + ); +} +.spectrum-Menu-backIcon { + fill: var( + --highcontrast-menu-item-color-default, + var(--mod-menu-back-icon-color-default) + ); + color: var( + --highcontrast-menu-item-color-default, + var(--mod-menu-back-icon-color-default) + ); + margin-block: var( + --mod-menu-back-icon-margin-block, + var(--spectrum-menu-back-icon-margin) + ); + margin-inline: var( + --mod-menu-back-icon-margin-inline, + var(--spectrum-menu-back-icon-margin) + ); +} diff --git a/packages/menu/test/submenu.test.ts b/packages/menu/test/submenu.test.ts index 10db3afe78..f6881de2bc 100644 --- a/packages/menu/test/submenu.test.ts +++ b/packages/menu/test/submenu.test.ts @@ -34,14 +34,13 @@ import '@spectrum-web-components/action-menu/sp-action-menu.js'; import '@spectrum-web-components/menu/sp-menu-group.js'; import '@spectrum-web-components/overlay/sp-overlay.js'; import '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js'; -import { isWebKit } from '@spectrum-web-components/shared'; async function styledFixture( story: TemplateResult, dir: 'ltr' | 'rtl' | 'auto' = 'ltr' ): Promise { const test = await fixture(html` - + ${story}