fix(panel): progressive enhancement to target calcite-actions in header

packages/calcite-components/src/components/accordion-item/accordion-item.scss

@@ -3,22 +3,24 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-accordion-border-color: [Deprecated] Use `--calcite-accordion-item-border-color`. Specifies the component's border color.
- * @prop --calcite-accordion-item-background-color: Specifies the component's background color.
- * @prop --calcite-accordion-item-border-color: Specifies the component's border color.
- * @prop --calcite-accordion-item-icon-color-end: Specifies the component's `iconEnd` color. Falls back to `--calcite-accordion-item-icon-color` or current color.
- * @prop --calcite-accordion-item-icon-color-start: Specifies the component's `iconStart` color. Falls back to `--calcite-accordion-item-icon-color` or current color.
+ * @prop --calcite-accordion-border-color: Specifies the component's border color.
+ * @prop --calcite-accordion-background-color: Specifies the component's background color.
+ * @prop --calcite-accordion-text-color: Specifies the component's text color.
+ * @prop --calcite-accordion-text-color-hover: Specifies the component's main text color on hover.
+ * @prop --calcite-accordion-text-color-pressed: Specifies the component's main text color when pressed.
+
+ * @prop --calcite-accordion-item-background-color: [Deprecated] Use --calcite-accordion-background-color. Specifies the component's background color.
+ * @prop --calcite-accordion-item-border-color: [Deprecated] Use --calcite-accordion-border-color. Specifies the component's border color.
  * @prop --calcite-accordion-item-content-space: Specifies the component's padding.
- * @prop --calcite-accordion-item-end-icon-color: [Deprecated] Use `--calcite-accordion-item-icon-color-end`. Specifies the component's `iconEnd` color. Falls back to `--calcite-accordion-item-icon-color` or current color.
+ * @prop --calcite-accordion-item-end-icon-color: Specifies the component's iconEnd color. Fallback to --calcite-accordion-item-icon-color or current color.
  * @prop --calcite-accordion-item-expand-icon-color: Specifies the component's expand icon color.
- * @prop --calcite-accordion-item-header-background-color: Specifies the component's `heading` background color.
- * @prop --calcite-accordion-item-heading-text-color: Specifies the component's `heading` text color.
- * @prop --calcite-accordion-item-icon-color: Specifies the component's default icon color.
- * @prop --calcite-accordion-item-start-icon-color: [Deprecated] Use `--calcite-accordion-item-icon-color-start`. Specifies the component's `iconStart` color. Falls back to `--calcite-accordion-item-icon-color` or current color.
- * @prop --calcite-accordion-item-text-color: Specifies the component's text color.
- * @prop --calcite-accordion-text-color-hover: [Deprecated] Use `--calcite-accordion-item-text-color-hover`. Specifies the component's main text color on hover.
- * @prop --calcite-accordion-text-color-pressed: [Deprecated] Use `--calcite-accordion-item-text-color-press`. Specifies the component's main text color when pressed.
- * @prop --calcite-accordion-text-color: [Deprecated] Use `--calcite-accordion-item-text-color`. Specifies the component's text color.
+ * @prop --calcite-accordion-item-header-background-color: Specifies the component's heading background color.
+ * @prop --calcite-accordion-item-heading-text-color: Specifies the component's heading text color.
+ * @prop --calcite-accordion-item-icon-color: [Deprecated] Use --calcite-icon-color. Specifies the component's default icon color.
+ * @prop --calcite-accordion-item-start-icon-color: Specifies the component's iconStart color. Fallback to --calcite-accordion-item-icon-color or current color.
+ * @prop --calcite-accordion-item-text-color: [Deprecated] Use --calcite-accordion-text-color. Specifies the component's text color.
+ * @prop --calcite-accordion-item-text-color-hover: [Deprecated] Use --calcite-accordion-text-color-hover. Specifies the component's text color on hover.
+ * @prop --calcite-accordion-item-text-color-press: [Deprecated] Use --calcite-accordion-text-color-press. Specifies the component's text color on press.
  */
 
 %icon-position {
@@ -35,8 +37,8 @@
     flex-col
     no-underline;
 
-  color: var(--calcite-accordion-item-text-color, var(--calcite-accordion-text-color, var(--calcite-color-text-3)));
-  background-color: var(--calcite-accordion-item-background-color);
+  color: var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-color-text-3)));
+  background-color: var(--calcite-accordion-background-color, var(--calcite-accordion-item-background-color));
   border-width: 0;
 
   .header {
@@ -72,8 +74,8 @@
   border-block-end-width: var(--calcite-border-width-sm);
   border-block-end-style: solid;
   border-color: var(
-    --calcite-accordion-item-border-color,
-    var(--calcite-accordion-border-color, theme("borderColor.color.2"))
+    --calcite-accordion-border-color,
+    var(--calcite-accordion-item-border-color, theme("borderColor.color.2"))
   );
 }
 
@@ -193,7 +195,7 @@
 .expand-icon {
   color: var(
     --calcite-accordion-item-expand-icon-color,
-    var(--calcite-accordion-item-text-color, var(--calcite-accordion-text-color, var(--calcite-color-text-3)))
+    var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-color-text-3)))
   );
   margin-inline-start: var(--calcite-internal-accordion-item-icon-spacing-start);
   margin-inline-end: var(--calcite-internal-accordion-item-icon-spacing-end);
@@ -217,15 +219,18 @@
   .heading {
     color: var(
       --calcite-accordion-item-heading-text-color,
-      var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2))
+      var(
+        --calcite-accordion-text-color-hover,
+        var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2))
+      )
     );
   }
 }
 
 :host([expanded]) {
   color: var(
-    --calcite-accordion-item-text-color,
-    var(--calcite-accordion-text-color, var(--calcite-accordion-text-color-pressed, var(--calcite-color-text-1)))
+    --calcite-accordion-text-color-pressed,
+    var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color, var(--calcite-color-text-1)))
   );
 
   .header {
@@ -236,8 +241,14 @@
     color: var(
       --calcite-accordion-item-expand-icon-color,
       var(
-        --calcite-accordion-item-text-color,
-        var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2)))
+        --calcite-accordion-text-color-hover,
+        var(
+          --calcite-accordion-text-color,
+          var(
+            --calcite-accordion-item-text-color,
+            var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2))
+          )
+        )
       )
     );
     transform: rotate(var(--calcite-internal-accordion-item-active-icon-rotation));
@@ -248,8 +259,14 @@
 
   .description {
     color: var(
-      --calcite-accordion-item-text-color,
-      var(--calcite-accordion-text-color, var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2)))
+      --calcite-accordion-text-color-hover,
+      var(
+        --calcite-accordion-text-color,
+        var(
+          --calcite-accordion-item-text-color,
+          var(--calcite-accordion-item-text-color-hover, var(--calcite-color-text-2))
+        )
+      )
     );
   }
 

packages/calcite-components/src/components/accordion/accordion.scss

@@ -4,7 +4,10 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-accordion-border-color: Specifies the component's border color.
- * @prop --calcite-accordion-background-color:  Specifies the component's background color.
+ * @prop --calcite-accordion-background-color: Specifies the component's background color.
+ * @prop --calcite-accordion-text-color: Specifies the component's text color.
+ * @prop --calcite-accordion-text-color-hover: Specifies the component's main text color on hover.
+ * @prop --calcite-accordion-text-color-pressed: Specifies the component's main text color when pressed.
 */
 
 :host {

packages/calcite-components/src/components/action/action.scss

@@ -22,6 +22,18 @@
   @extend %component-host;
   @apply flex bg-transparent cursor-pointer;
   --calcite-internal-action-text-color: var(--calcite-color-text-3);
+
+  border-radius: var(
+    --calcite-action-corner-radius,
+    var(--calcite-action-corner-radius-start-start, var(--calcite-corner-radius))
+      var(--calcite-action-corner-radius-start-end, var(--calcite-corner-radius))
+      var(--calcite-action-corner-radius-end-end, var(--calcite-corner-radius))
+      var(--calcite-action-corner-radius-end-start, var(--calcite-corner-radius))
+  );
+}
+
+.interaction-container {
+  border-radius: inherit;
 }
 
 :host([drag-handle]) {
@@ -30,15 +42,8 @@
   --calcite-internal-action-padding-inline: var(--calcite-spacing-xxs);
 }
 
-:host,
 .button {
-  border-radius: var(
-    --calcite-action-corner-radius,
-    var(--calcite-action-corner-radius-start-start, var(--calcite-corner-radius))
-      var(--calcite-action-corner-radius-start-end, var(--calcite-corner-radius))
-      var(--calcite-action-corner-radius-end-end, var(--calcite-corner-radius))
-      var(--calcite-action-corner-radius-end-start, var(--calcite-corner-radius))
-  );
+  border-radius: inherit;
 }
 
 @mixin action-indicator() {

packages/calcite-components/src/components/panel/panel.e2e.ts

@@ -721,7 +721,6 @@ describe("calcite-panel", () => {
       </calcite-panel>`,
       {
         "--calcite-panel-corner-radius": {
-          shadowSelector: `.${CSS.container}`,
           targetProp: "borderRadius",
         },
         "--calcite-panel-heading-text-color": {

packages/calcite-components/src/components/panel/panel.scss

@@ -9,31 +9,26 @@
  * @prop --calcite-panel-border-color: Specifies the component's border color.
  * @prop --calcite-panel-background-color: Specifies the component's background color.
  * @prop --calcite-panel-header-background-color: Specifies the background color of the component's header.
+ * @prop --calcite-panel-header-action-background-color: Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions`.
+ * @prop --calcite-panel-header-action-background-color-hover: Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when hovered.
+ * @prop --calcite-panel-header-action-background-color-press: Specifies the background color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed.
+ * @prop --calcite-panel-header-action-text-color: Specifies the text color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions`.
+ * @prop --calcite-panel-header-action-text-color-press: Specifies the text color of Panel's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed.
  * @prop --calcite-panel-footer-background-color: Specifies the background color of the component's footer.
  * @prop --calcite-panel-space: Specifies the padding of the component's `"unnamed (default)"` slot.
  * @prop --calcite-panel-header-content-space: Specifies the padding of the `"header-content"` slot.
  * @prop --calcite-panel-footer-space: Specifies the padding of the component's footer.
- * @prop --calcite-action-background-color: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s. Applies to any slotted `calcite-action`s.
- * @prop --calcite-action-background-color-hover: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s.
- * @prop --calcite-action-background-color-pressed: Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s.
- * @prop --calcite-action-text-color-hover: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s.
- * @prop --calcite-action-text-color-pressed: Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s.
  * @prop --calcite-popover-border-color: Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s.
  * @prop --calcite-panel-content-space: [Deprecated] Use `--calcite-panel-space` instead. Specifies the padding of the component's content.
  * @prop --calcite-panel-footer-padding: [Deprecated] Use `--calcite-panel-footer-space` instead. Specifies the padding of the component's footer.
  * @prop --calcite-panel-header-border-block-end: [Deprecated] Use `--calcite-panel-border-color` instead. Specifies the component header's block end border.
- * @prop --calcite-panel-header-action-background-color-hover: Specifies the background color of the component's `calcite-action` items  in the panel header when hovered.
- * @prop --calcite-panel-header-action-background-color-press: Specifies the background color of the component's `calcite-action` items  in the panel header when pressed.
- * @prop --calcite-panel-header-action-background-color: Specifies the background color of the component's `calcite-action` items  in the panel header.
- * @prop --calcite-panel-header-action-indicator-color: Specifies the color of the component's `calcite-action` items' indicator in the panel header.
- * @prop --calcite-panel-header-action-text-color-press: Specifies the text color of the component's `calcite-action` items in the panel header when pressed.
- * @prop --calcite-panel-header-action-text-color: Specifies the text color of the component's `calcite-action` items in the panel header.
  */
 
 :host {
   @apply relative flex w-full h-full flex-auto overflow-hidden box-border;
 
   --calcite-min-header-height: calc(var(--calcite-icon-size) * 3);
+  border-radius: var(--calcite-panel-corner-radius, var(--calcite-corner-radius-sharp));
 }
 
 @include disabled();
@@ -94,11 +89,11 @@
 }
 
 .container {
+  --calcite-internal-panel-corner-radius: inherit;
   @apply relative bg-background m-0 flex w-full flex-auto flex-col items-stretch p-0 overflow-hidden box-border text-n1 text-color-2;
   transition:
     max-block-size var(--calcite-animation-timing),
     inline-size var(--calcite-animation-timing);
-  border-radius: var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none));
   box-sizing: border-box;
   font-size: var(--calcite-font-size--1);
 }
@@ -113,8 +108,7 @@
 
 .header {
   @apply flex flex-col z-header;
-  border-radius: var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none))
-    var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none)) 0 0;
+
   background-color: var(--calcite-panel-header-background-color, var(--calcite-color-foreground-1));
   border-block-end: 1px solid
     var(--calcite-panel-border-color, var(--calcite-panel-header-border-block-end, var(--calcite-color-border-3)));
@@ -149,15 +143,6 @@
   margin-inline-end: auto;
   justify-content: center;
 
-  .header-actions {
-    --calcite-action-background-color-hover: var(--calcite-panel-header-action-background-color-hover);
-    --calcite-action-background-color-press: var(--calcite-panel-header-action-background-color-press);
-    --calcite-action-background-color: var(--calcite-panel-header-action-background-color);
-    --calcite-action-indicator-color: var(--calcite-panel-header-action-indicator-color);
-    --calcite-action-text-color-press: var(--calcite-panel-header-action-text-color-press);
-    --calcite-action-text-color: var(--calcite-panel-header-action-text-color);
-  }
-
   .heading,
   .description {
     @apply block
@@ -181,6 +166,17 @@
   }
 }
 
+#close,
+#collapse,
+.back-button,
+calcite-action-menu {
+  --calcite-action-background-color: var(--calcite-panel-header-action-background-color);
+  --calcite-action-background-color-hover: var(--calcite-panel-header-action-background-color-hover);
+  --calcite-action-background-color-press: var(--calcite-panel-header-action-background-color-press);
+  --calcite-action-text-color: var(--calcite-panel-header-action-text-color);
+  --calcite-action-text-color-pressed: var(--calcite-panel-header-action-text-color-pressed);
+}
+
 .back-button {
   @apply border-0
   border-solid;
@@ -199,24 +195,6 @@
   margin-inline-start: theme("margin.auto");
 }
 
-#close,
-#collapse,
-.back-button,
-calcite-action-menu {
-}
-
-#close,
-#collapse,
-calcite-action-menu {
-  &:last-child {
-    --calcite-action-corner-radius-start-end: var(--calcite-panel-corner-radius);
-  }
-}
-
-.back-button {
-  --calcite-action-corner-radius-start-start: var(--calcite-panel-corner-radius);
-}
-
 .content-wrapper {
   @apply flex
   flex-auto
@@ -257,8 +235,6 @@ calcite-action-menu {
     var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-space))
   );
   background-color: var(--calcite-panel-footer-background-color, var(--calcite-color-foreground-1));
-  border-radius: 0 0 var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none))
-    var(--calcite-panel-corner-radius, var(--calcite-corner-radius-none));
 }
 
 .footer-content {