feat(alert): apply --calcite-alert-corner-radius to internal close button

packages/calcite-components/src/components.d.ts

@@ -7104,7 +7104,7 @@ declare global {
         new (): HTMLCalciteListItemElement;
     };
     interface HTMLCalciteListItemGroupElementEventMap {
-        "calciteInternalListItemGroupDefaultSlotChange": DragEvent;
+        "calciteInternalListItemGroupDefaultSlotChange": void;
     }
     interface HTMLCalciteListItemGroupElement extends Components.CalciteListItemGroup, HTMLStencilElement {
         addEventListener<K extends keyof HTMLCalciteListItemGroupElementEventMap>(type: K, listener: (this: HTMLCalciteListItemGroupElement, ev: CalciteListItemGroupCustomEvent<HTMLCalciteListItemGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -7850,7 +7850,7 @@ declare global {
         new (): HTMLCalciteTileSelectGroupElement;
     };
     interface HTMLCalciteTimePickerElementEventMap {
-        "calciteInternalTimePickerChange": string;
+        "calciteInternalTimePickerChange": void;
     }
     interface HTMLCalciteTimePickerElement extends Components.CalciteTimePicker, HTMLStencilElement {
         addEventListener<K extends keyof HTMLCalciteTimePickerElementEventMap>(type: K, listener: (this: HTMLCalciteTimePickerElement, ev: CalciteTimePickerCustomEvent<HTMLCalciteTimePickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -11461,7 +11461,7 @@ declare namespace LocalJSX {
         /**
           * Fires when changes occur in the default slot, notifying parent lists of the changes.
          */
-        "onCalciteInternalListItemGroupDefaultSlotChange"?: (event: CalciteListItemGroupCustomEvent<DragEvent>) => void;
+        "onCalciteInternalListItemGroupDefaultSlotChange"?: (event: CalciteListItemGroupCustomEvent<void>) => void;
     }
     interface CalciteLoader {
         /**
@@ -13813,7 +13813,7 @@ declare namespace LocalJSX {
           * Specifies the Unicode numeral system used by the component for localization.
          */
         "numberingSystem"?: NumberingSystem;
-        "onCalciteInternalTimePickerChange"?: (event: CalciteTimePickerCustomEvent<string>) => void;
+        "onCalciteInternalTimePickerChange"?: (event: CalciteTimePickerCustomEvent<void>) => void;
         /**
           * Specifies the size of the component.
          */

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

@@ -594,10 +594,60 @@ describe("calcite-alert", () => {
         shadowSelector: `.${CSS.container}`,
         targetProp: "backgroundColor",
       },
-      "--calcite-alert-corner-radius": {
+      "--calcite-alert-corner-radius": [
+        {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "borderStartStartRadius",
+        },
+        {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "borderStartEndRadius",
+        },
+        {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "borderEndStartRadius",
+        },
+        {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "borderEndEndRadius",
+        },
+        {
+          shadowSelector: `.${CSS.close}`,
+          targetProp: "borderStartEndRadius",
+        },
+        {
+          shadowSelector: `.${CSS.close}`,
+          targetProp: "borderEndEndRadius",
+        },
+      ],
+      "--calcite-alert-corner-radius-start-start": {
         shadowSelector: `.${CSS.container}`,
-        targetProp: "borderRadius",
+        targetProp: "borderStartStartRadius",
       },
+      "--calcite-alert-corner-radius-start-end": [
+        {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "borderStartEndRadius",
+        },
+        {
+          shadowSelector: `.${CSS.close}`,
+          targetProp: "borderStartEndRadius",
+        },
+      ],
+      "--calcite-alert-corner-radius-end-start": {
+        shadowSelector: `.${CSS.container}`,
+        targetProp: "borderEndStartRadius",
+      },
+      "--calcite-alert-corner-radius-end-end": [
+        {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "borderEndEndRadius",
+        },
+        {
+          shadowSelector: `.${CSS.close}`,
+          targetProp: "borderEndEndRadius",
+        },
+      ],
       "--calcite-alert-shadow": {
         shadowSelector: `.${CSS.container}`,
         targetProp: "boxShadow",

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

@@ -5,7 +5,11 @@
  *
  * @prop --calcite-alert-width: Specifies the width of the component.
  * @prop --calcite-alert-background-color: Specifies the component's background color.
- * @prop --calcite-alert-corner-radius: Specifies the component's border radius.
+ * @prop --calcite-alert-corner-radius: Specifies the component's corner radius.
+ * @prop --calcite-alert-corner-radius-start-start: Specifies the component's corner radius start start.
+ * @prop --calcite-alert-corner-radius-start-end: Specifies the component's corner radius start end.
+ * @prop --calcite-alert-corner-radius-end-start: Specifies the component's corner radius end start.
+ * @prop --calcite-alert-corner-radius-end-end: Specifies the component's corner radius end end.
  * @prop --calcite-alert-shadow: Specifies the component's shadow.
  */
 
@@ -40,7 +44,22 @@ $border-style: 1px solid var(--calcite-color-border-3);
     (var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow))
   );
   background-color: var(--calcite-alert-background-color, var(--calcite-color-foreground-1));
-  border-radius: var(--calcite-alert-corner-radius, var(--calcite-border-radius));
+  border-start-start-radius: var(
+    --calcite-alert-corner-radius-start-start,
+    var(--calcite-alert-corner-radius, var(--calcite-border-radius))
+  );
+  border-start-end-radius: var(
+    --calcite-alert-corner-radius-start-end,
+    var(--calcite-alert-corner-radius, var(--calcite-border-radius))
+  );
+  border-end-start-radius: var(
+    --calcite-alert-corner-radius-end-start,
+    var(--calcite-alert-corner-radius, var(--calcite-border-radius))
+  );
+  border-end-end-radius: var(
+    --calcite-alert-corner-radius-end-end,
+    var(--calcite-alert-corner-radius, var(--calcite-border-radius))
+  );
   border-block-start: 0 solid transparent;
   border-inline: $border-style;
   border-block-end: $border-style;
@@ -81,6 +100,14 @@ $border-style: 1px solid var(--calcite-color-border-3);
 .close {
   @apply bg-transparent border-none cursor-pointer flex items-center justify-end outline-none self-stretch text-color-3;
   -webkit-appearance: none;
+  border-start-end-radius: var(
+    --calcite-alert-corner-radius-start-end,
+    var(--calcite-alert-corner-radius, var(--calcite-border-radius))
+  );
+  border-end-end-radius: var(
+    --calcite-alert-corner-radius-end-end,
+    var(--calcite-alert-corner-radius, var(--calcite-border-radius))
+  );
 
   @apply focus-base;
   &:focus {
@@ -99,8 +126,7 @@ $border-style: 1px solid var(--calcite-color-border-3);
 }
 
 .queue-count {
-  @apply bg-foreground-1
-  cursor-default
+  @apply cursor-default
   flex
   font-medium
   invisible

packages/calcite-components/src/custom-theme/alert.ts

@@ -5,6 +5,10 @@ export const alertTokens = {
   calciteAlertWidth: "",
   calciteAlertBackgroundColor: "",
   calciteAlertCornerRadius: "",
+  calciteAlertCornerRadiusStartStart: "",
+  calciteAlertCornerRadiusStartEnd: "",
+  calciteAlertCornerRadiusEndStart: "",
+  calciteAlertCornerRadiusEndEnd: "",
   calciteAlertShadow: "",
 };