docs(popover): make a new example for styling

src/components/popover/examples/popover-basic.tsx

@@ -24,7 +24,6 @@ import { Component, h, State } from '@stencil/core';
 @Component({
     tag: 'limel-example-popover-basic',
     shadow: true,
-    styleUrl: 'popover-basic.scss',
 })
 export class PopoverBasicExample {
     @State()

src/components/popover/examples/popover-styling.scss

@@ -0,0 +1,5 @@
+limel-popover {
+    --popover-border-radius: 0.95rem;
+    --popover-body-background-color: transparent;
+    --popover-box-shadow: var(--shadow-depth-8);
+}

src/components/popover/examples/popover-styling.tsx

@@ -0,0 +1,53 @@
+import { Component, h, State } from '@stencil/core';
+
+/**
+ * Styling
+ * There are a few custom CSS properties that you can use to style the popover.
+ */
+
+@Component({
+    tag: 'limel-example-popover-styling',
+    shadow: true,
+    styleUrl: 'popover-styling.scss',
+})
+export class PopoverStylingExample {
+    @State()
+    private isOpen = false;
+
+    public render() {
+        const image = {
+            src: 'https://unsplash.it/800/800/?random',
+            alt: 'Some random image',
+        };
+
+        return [
+            <limel-popover open={this.isOpen} onClose={this.onPopoverClose}>
+                <limel-button
+                    slot="trigger"
+                    label="Click me!"
+                    onClick={this.openPopover}
+                />
+                <limel-card
+                    style={{ 'max-width': '20rem' }}
+                    orientation="landscape"
+                    image={image}
+                    heading="Heading"
+                    subheading="Subheading"
+                    value="This is the body of the card."
+                />
+            </limel-popover>,
+        ];
+    }
+
+    private openPopover = (event: MouseEvent) => {
+        event.stopPropagation();
+        console.log('opening');
+        this.isOpen = true;
+    };
+
+    private onPopoverClose = (event: CustomEvent) => {
+        event.stopPropagation();
+        console.log('closing');
+        this.isOpen = false;
+    };
+}

src/components/popover/popover.scss

@@ -1,7 +1,7 @@
 /**
- * @prop --popover-surface-width: Width of the popover surface. defaults to `auto`
- * @prop --popover-body-background-color: Background color of popover body, defaults to `--lime-elevated-surface-background-color`.
- * @prop --popover-border-radius: Border radius of popover, defaults to `0.75rem`.
+ * @prop --popover-surface-width: Width of the popover surface. Defaults to `auto`
+ * @prop --popover-body-background-color: Background color of popover body. Defaults to `--lime-elevated-surface-background-color`.
+ * @prop --popover-border-radius: Border radius of popover. Defaults to `0.75rem`.
  * @prop --popover-z-index: z-index of the popover.
  * @prop --popover-box-shadow: Defines the shadow of the popover surface. Defaults to `--shadow-depth-16`.
  */

src/components/popover/popover.tsx

@@ -56,6 +56,7 @@ import { OpenDirection } from '../menu/menu.types';
  * @slot - Content to put inside the surface
  * @exampleComponent limel-example-popover-basic
  * @exampleComponent limel-example-popover-trigger-interaction
+ * @exampleComponent limel-example-popover-styling
  */
 @Component({
     tag: 'limel-popover',