added input, textarea, change range, stepper to shadcn style

Author: ZiZIGY

.vscode/settings.json

@@ -25,6 +25,7 @@
     "docs/@capsule/components/capsule-speed-dial/vscode.data.json",
     "docs/@capsule/components/capsule-container/vscode.data.json",
     "docs/@capsule/components/capsule-icon/vscode.data.json",
-    "docs/@capsule/components/capsule-input/vscode.data.json"
+    "docs/@capsule/components/capsule-input/vscode.data.json",
+    "docs/@capsule/components/capsule-hover-card/vscode.data.json"
   ]
 }

docs/.vitepress/config.ts

@@ -79,6 +79,7 @@ export default defineConfig({
               { text: 'Overview', link: '/components/' },
               { text: 'Button', link: '/components/button' },
               { text: 'Input', link: '/components/input' },
+              { text: 'Textarea', link: '/components/textarea' },
               { text: 'Button Group', link: '/components/button-group' },
               { text: 'Badge', link: '/components/badge' },
               { text: 'Kbd', link: '/components/kbd' },
@@ -148,6 +149,7 @@ export default defineConfig({
               { text: 'Обзор', link: '/ru/components/' },
               { text: 'Button', link: '/ru/components/button' },
               { text: 'Input', link: '/ru/components/input' },
+              { text: 'Textarea', link: '/ru/components/textarea' },
               { text: 'Button Group', link: '/ru/components/button-group' },
               { text: 'Badge', link: '/ru/components/badge' },
               { text: 'Kbd', link: '/ru/components/kbd' },

docs/@capsule/components/capsule-hover-card/capsule-hover-card-content.js

@@ -0,0 +1,25 @@
+import { LitElement, html } from '../../lit';
+
+class CapsuleHoverCardContent extends LitElement {
+  constructor() {
+    super();
+  }
+
+  createRenderRoot() {
+    return this;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'tooltip');
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define(
+  'capsule-hover-card-content',
+  CapsuleHoverCardContent
+);

docs/@capsule/components/capsule-hover-card/capsule-hover-card-trigger.js

@@ -0,0 +1,23 @@
+import { LitElement, html } from '../../lit';
+
+class CapsuleHoverCardTrigger extends LitElement {
+  constructor() {
+    super();
+  }
+
+  createRenderRoot() {
+    return this;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'button');
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define('capsule-hover-card-trigger', CapsuleHoverCardTrigger);
+

docs/@capsule/components/capsule-hover-card/capsule-hover-card.js

@@ -0,0 +1,23 @@
+import { LitElement, html } from '../../lit';
+
+class CapsuleHoverCard extends LitElement {
+  constructor() {
+    super();
+  }
+
+  createRenderRoot() {
+    return this;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'group');
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define('capsule-hover-card', CapsuleHoverCard);
+

docs/@capsule/components/capsule-hover-card/capsule-hover-card.style.css

@@ -0,0 +1,114 @@
+capsule-hover-card {
+  position: relative;
+  display: inline-block;
+}
+
+capsule-hover-card-trigger {
+  display: inline-block;
+  cursor: pointer;
+}
+
+capsule-hover-card-content {
+  position: absolute;
+  z-index: var(--z-tooltip);
+  width: 16rem;
+  padding: 1rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border);
+  background-color: var(--popover);
+  color: var(--popover-foreground);
+  box-shadow: var(--shadow-md);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  transform: scale(0.95);
+  outline: none;
+  height: max-content;
+}
+
+capsule-hover-card-content:hover {
+  pointer-events: auto;
+}
+
+capsule-hover-card:hover capsule-hover-card-content,
+capsule-hover-card:focus-within capsule-hover-card-content,
+capsule-hover-card-content:hover,
+capsule-hover-card-trigger:hover ~ capsule-hover-card-content,
+capsule-hover-card-trigger:hover + capsule-hover-card-content {
+  opacity: 1;
+  pointer-events: auto;
+  transform: scale(1);
+}
+
+/* Top placement */
+capsule-hover-card-content,
+capsule-hover-card[placement='top'] capsule-hover-card-content {
+  bottom: 100%;
+  left: 50%;
+  transform: translate(-50%, 0.5rem) scale(0.95);
+  margin-bottom: 0.25rem;
+}
+
+capsule-hover-card:hover capsule-hover-card-content,
+capsule-hover-card:focus-within capsule-hover-card-content,
+capsule-hover-card[placement='top']:hover
+  capsule-hover-card-content,
+capsule-hover-card[placement='top']:focus-within
+  capsule-hover-card-content,
+capsule-hover-card[placement='top']
+  capsule-hover-card-content:hover {
+  transform: translate(-50%, 0) scale(1);
+}
+
+/* Bottom placement */
+capsule-hover-card[placement='bottom'] capsule-hover-card-content {
+  top: 100%;
+  left: 50%;
+  transform: translate(-50%, -0.5rem) scale(0.95);
+  margin-top: 0.25rem;
+}
+
+capsule-hover-card[placement='bottom']:hover
+  capsule-hover-card-content,
+capsule-hover-card[placement='bottom']:focus-within
+  capsule-hover-card-content,
+capsule-hover-card[placement='bottom']
+  capsule-hover-card-content:hover {
+  transform: translate(-50%, 0) scale(1);
+}
+
+/* Left placement */
+capsule-hover-card[placement='left'] capsule-hover-card-content {
+  right: 100%;
+  top: 50%;
+  left: auto;
+  transform: translate(0.5rem, -50%) scale(0.95);
+  margin-right: 0.25rem;
+}
+
+capsule-hover-card[placement='left']:hover
+  capsule-hover-card-content,
+capsule-hover-card[placement='left']:focus-within
+  capsule-hover-card-content,
+capsule-hover-card[placement='left']
+  capsule-hover-card-content:hover {
+  transform: translate(0, -50%) scale(1);
+}
+
+/* Right placement */
+capsule-hover-card[placement='right'] capsule-hover-card-content {
+  left: 100%;
+  top: 50%;
+  transform: translate(-0.5rem, -50%) scale(0.95);
+  margin-left: 0.25rem;
+}
+
+capsule-hover-card[placement='right']:hover
+  capsule-hover-card-content,
+capsule-hover-card[placement='right']:focus-within
+  capsule-hover-card-content,
+capsule-hover-card[placement='right']
+  capsule-hover-card-content:hover {
+  transform: translate(0, -50%) scale(1);
+}

docs/@capsule/components/capsule-hover-card/register.js

@@ -0,0 +1,4 @@
+import './capsule-hover-card-trigger.js';
+import './capsule-hover-card-content.js';
+import './capsule-hover-card.js';
+

docs/@capsule/components/capsule-hover-card/vscode.data.json

@@ -0,0 +1,38 @@
+{
+  "version": 1.1,
+  "tags": [
+    {
+      "name": "capsule-hover-card",
+      "description": "Root container for HoverCard component",
+      "attributes": [
+        {
+          "name": "placement",
+          "description": "Position of the hover card content",
+          "values": [
+            {
+              "name": "top"
+            },
+            {
+              "name": "bottom"
+            },
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "capsule-hover-card-trigger",
+      "description": "Trigger element that shows the hover card on hover"
+    },
+    {
+      "name": "capsule-hover-card-content",
+      "description": "Content that appears when hovering over the trigger"
+    }
+  ]
+}
+