fix(tooltip): add border radius (#1841)

* fix(tooltip): add border radius, use logical properties, remove deprecated

* chore(tooltip): add changeset

* fix(tooltip): revert removal of deprecated css props

* chore(tooltip): update changeset

.changeset/wicked-steaks-love.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-tooltip>`: added border radius style to match specifications

elements/rh-tooltip/rh-tooltip.css

@@ -30,12 +30,13 @@
   word-break: break-word;
   translate: var(--_floating-content-translate);
   width: max-content;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   will-change: opacity;
   line-height: var(--rh-line-height-body-text, 1.5);
   box-shadow: var(--rh-box-shadow-sm, 0 2px 4px 0 rgba(21, 21, 21, 0.2));
   max-width: var(--rh-tooltip-max-width, var(--rh-tooltip--MaxWidth, 18.75rem));
+  border-radius: var(--rh-border-radius-default, 3px);
 
   /* WARNING: properties containing `__`are deprecated and will be removed */
   padding:
@@ -72,7 +73,10 @@
   background-color:
     var(
         --rh-tooltip-content-background-color,
-        var(--rh-tooltip__content--BackgroundColor, var(--rh-color-surface-darkest, #151515))
+        var(
+          --rh-tooltip__content--BackgroundColor,
+          var(--rh-color-surface-darkest, #151515)
+        )
       );
 }
 
@@ -87,12 +91,10 @@
   width: var(--_floating-arrow-size);
   height: var(--_floating-arrow-size);
   will-change: left top right bottom;
-
-  /* WARNING: properties containing `__`are deprecated and will be removed */
   background-color:
     var(
         --rh-tooltip-content-background-color,
-        var(--rh-tooltip__content--BackgroundColor, var(--rh-color-surface-darkest, #151515))
+        var(--rh-color-surface-darkest, #151515)
       );
 }
 
@@ -105,28 +107,28 @@
 }
 
 /* PLAIN */
-.left #tooltip:after { right: calc(-0.5 * var(--_floating-arrow-size)); }
-.top #tooltip:after { top: calc(100% - 0.5 * var(--_floating-arrow-size)); }
-.right #tooltip:after { right: calc(100% - 0.5 * var(--_floating-arrow-size)); }
-.bottom #tooltip:after { bottom: calc(100% - 0.5 * var(--_floating-arrow-size)); }
+.left #tooltip:after { inset-inline-start: calc(-0.5 * var(--_floating-arrow-size)); }
+.top #tooltip:after { inset-block-start: calc(100% - 0.5 * var(--_floating-arrow-size)); }
+.right #tooltip:after { inset-inline-end: calc(100% - 0.5 * var(--_floating-arrow-size)); }
+.bottom #tooltip:after { inset-block-end: calc(100% - 0.5 * var(--_floating-arrow-size)); }
 
 /* CENTER */
-.left.center #tooltip:after { top: calc(50% - 0.5 * var(--_floating-arrow-size)); }
-.top.center #tooltip:after { right: calc(50% - 0.5 * var(--_floating-arrow-size)); }
-.right.center #tooltip:after { top: calc(50% - 0.5 * var(--_floating-arrow-size)); }
-.bottom.center #tooltip:after { right: calc(50% - 0.5 * var(--_floating-arrow-size)); }
+.left.center #tooltip:after { inset-block-start: calc(50% - 0.5 * var(--_floating-arrow-size)); }
+.top.center #tooltip:after { inset-inline-end: calc(50% - 0.5 * var(--_floating-arrow-size)); }
+.right.center #tooltip:after { inset-block-start: calc(50% - 0.5 * var(--_floating-arrow-size)); }
+.bottom.center #tooltip:after { inset-inline-end: calc(50% - 0.5 * var(--_floating-arrow-size)); }
 
 /* START */
-.left.start #tooltip:after { top: var(--_floating-arrow-size); }
-.top.start #tooltip:after { left: var(--_floating-arrow-size); }
-.right.start #tooltip:after { top: var(--_floating-arrow-size); }
-.bottom.start #tooltip:after { left: var(--_floating-arrow-size); }
+.left.start #tooltip:after { inset-block-start: var(--_floating-arrow-size); }
+.top.start #tooltip:after { inset-inline-start: var(--_floating-arrow-size); }
+.right.start #tooltip:after { inset-block-start: var(--_floating-arrow-size); }
+.bottom.start #tooltip:after { inset-inline-start: var(--_floating-arrow-size); }
 
 /* END */
-.left.end #tooltip:after { bottom: var(--_floating-arrow-size); }
-.top.end #tooltip:after { right: var(--_floating-arrow-size); }
-.right.end #tooltip:after { bottom: var(--_floating-arrow-size); }
-.bottom.end #tooltip:after { right: var(--_floating-arrow-size); }
+.left.end #tooltip:after { inset-block-end: var(--_floating-arrow-size); }
+.top.end #tooltip:after { inset-inline-end: var(--_floating-arrow-size); }
+.right.end #tooltip:after { inset-block-end: var(--_floating-arrow-size); }
+.bottom.end #tooltip:after { inset-inline-end: var(--_floating-arrow-size); }
 
 :host([position="left"]),
 :host([position="right"]) {

lib/elements/rh-context-picker/rh-context-picker.css

@@ -1,15 +1,15 @@
 :host {
   display: inline-flex;
   position: relative;
+  container-name: host;
+  container-type: inline-size;
 }
 
 * {
   box-sizing: border-box;
 }
 
 #container {
-  display: contents;
-
   --thumb-color: var(--rh-color-interactive-blue-darker, #0066cc);
 }