Refine label styles and sidebar group spacing

typescript/packages/common-os-ui/src/components/os-sidebar.ts

@@ -60,14 +60,20 @@ export class OsSidebarGroup extends LitElement {
         display: flex;
         flex-direction: column;
       }
+
+      .sgroup {
+        gap: var(--u);
+      }
     `,
   ];
 
   override render() {
     return html`
-      <aside class="vstack">
-        <slot class="label" name="label"></slot>
-        <div><slot name="content"></slot></div>
+      <aside class="sgroup vstack">
+        <heading class="sgroup-heading"
+          ><slot class="label" name="label"></slot
+        ></heading>
+        <div class="sgroup-content"><slot name="content"></slot></div>
       </aside>
     `;
   }

typescript/packages/common-os-ui/src/shared/styles.ts

@@ -127,6 +127,7 @@ export const base = css`
   .label {
     color: var(--c-text2);
     font-weight: normal;
+    text-transform: uppercase;
     font-family: var(--font-family);
     font-size: var(--u-xsm-size);
     line-height: var(--u-xsm-line);