npm - snice - Versions diffs - 1.14.3 → 2.1.0 - Mend

snice 1.14.3 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (185) hide show

package/bin/templates/base/tsconfig.json +5 -4
package/components/accordion/demo.html +403 -0
package/components/accordion/snice-accordion-item.css +85 -0
package/components/accordion/snice-accordion-item.ts +226 -0
package/components/accordion/snice-accordion.css +31 -0
package/components/accordion/snice-accordion.ts +182 -0
package/components/accordion/snice-accordion.types.ts +32 -0
package/components/alert/demo.html +445 -0
package/components/alert/snice-alert.css +195 -0
package/components/alert/snice-alert.ts +141 -0
package/components/alert/snice-alert.types.ts +12 -0
package/components/avatar/demo.html +598 -0
package/components/avatar/snice-avatar.css +131 -0
package/components/avatar/snice-avatar.ts +136 -0
package/components/avatar/snice-avatar.types.ts +13 -0
package/components/badge/demo.html +523 -0
package/components/badge/snice-badge.css +161 -0
package/components/badge/snice-badge.ts +117 -0
package/components/badge/snice-badge.types.ts +16 -0
package/components/breadcrumbs/demo.html +404 -0
package/components/breadcrumbs/snice-breadcrumbs.css +133 -0
package/components/breadcrumbs/snice-breadcrumbs.ts +191 -0
package/components/breadcrumbs/snice-breadcrumbs.types.ts +26 -0
package/components/breadcrumbs/snice-crumb.ts +26 -0
package/components/button/demo.html +42 -0
package/components/button/snice-button.css +230 -0
package/components/button/snice-button.ts +169 -0
package/components/button/snice-button.types.ts +25 -0
package/components/card/demo.html +525 -0
package/components/card/snice-card.css +140 -0
package/components/card/snice-card.ts +102 -0
package/components/card/snice-card.types.ts +10 -0
package/components/checkbox/demo.html +253 -0
package/components/checkbox/snice-checkbox.css +164 -0
package/components/checkbox/snice-checkbox.ts +223 -0
package/components/checkbox/snice-checkbox.types.ts +22 -0
package/components/chip/demo.html +383 -0
package/components/chip/snice-chip.css +195 -0
package/components/chip/snice-chip.ts +139 -0
package/components/chip/snice-chip.types.ts +15 -0
package/components/date-picker/README.md +233 -0
package/components/date-picker/demo.html +191 -0
package/components/date-picker/snice-date-picker.css +330 -0
package/components/date-picker/snice-date-picker.ts +777 -0
package/components/date-picker/snice-date-picker.types.ts +83 -0
package/components/divider/demo.html +233 -0
package/components/divider/snice-divider.css +155 -0
package/components/divider/snice-divider.ts +69 -0
package/components/divider/snice-divider.types.ts +15 -0
package/components/drawer/demo.html +328 -0
package/components/drawer/snice-drawer.css +476 -0
package/components/drawer/snice-drawer.ts +287 -0
package/components/drawer/snice-drawer.types.ts +17 -0
package/components/global.d.ts +14 -0
package/components/input/demo.html +303 -0
package/components/input/snice-input.css +257 -0
package/components/input/snice-input.ts +442 -0
package/components/input/snice-input.types.ts +59 -0
package/components/input/test.html +77 -0
package/components/layout/README.md +260 -0
package/components/layout/demo.html +538 -0
package/components/layout/snice-layout-blog.css +129 -0
package/components/layout/snice-layout-blog.ts +48 -0
package/components/layout/snice-layout-card.css +104 -0
package/components/layout/snice-layout-card.ts +35 -0
package/components/layout/snice-layout-centered.css +51 -0
package/components/layout/snice-layout-centered.ts +22 -0
package/components/layout/snice-layout-dashboard.css +98 -0
package/components/layout/snice-layout-dashboard.ts +45 -0
package/components/layout/snice-layout-fullscreen.css +72 -0
package/components/layout/snice-layout-fullscreen.ts +34 -0
package/components/layout/snice-layout-landing.css +92 -0
package/components/layout/snice-layout-landing.ts +47 -0
package/components/layout/snice-layout-minimal.css +16 -0
package/components/layout/snice-layout-minimal.ts +19 -0
package/components/layout/snice-layout-sidebar.css +117 -0
package/components/layout/snice-layout-sidebar.ts +48 -0
package/components/layout/snice-layout-split.css +103 -0
package/components/layout/snice-layout-split.ts +29 -0
package/components/layout/snice-layout.css +72 -0
package/components/layout/snice-layout.ts +35 -0
package/components/layout/snice-layout.types.ts +5 -0
package/components/login/demo-auth-controller.ts +185 -0
package/components/login/demo.html +470 -0
package/components/login/snice-login.css +204 -0
package/components/login/snice-login.ts +337 -0
package/components/login/snice-login.types.ts +34 -0
package/components/modal/demo.html +291 -0
package/components/modal/snice-modal.css +203 -0
package/components/modal/snice-modal.ts +233 -0
package/components/modal/snice-modal.types.ts +21 -0
package/components/pagination/demo.html +395 -0
package/components/pagination/snice-pagination.ts +333 -0
package/components/pagination/snice-pagination.types.ts +21 -0
package/components/progress/demo.html +510 -0
package/components/progress/snice-progress.css +267 -0
package/components/progress/snice-progress.ts +247 -0
package/components/progress/snice-progress.types.ts +19 -0
package/components/radio/demo.html +287 -0
package/components/radio/snice-radio.css +171 -0
package/components/radio/snice-radio.ts +218 -0
package/components/radio/snice-radio.types.ts +21 -0
package/components/select/demo.html +511 -0
package/components/select/snice-option.ts +52 -0
package/components/select/snice-option.types.ts +14 -0
package/components/select/snice-select.css +392 -0
package/components/select/snice-select.ts +796 -0
package/components/select/snice-select.types.ts +55 -0
package/components/skeleton/demo.html +514 -0
package/components/skeleton/snice-skeleton.css +109 -0
package/components/skeleton/snice-skeleton.ts +126 -0
package/components/skeleton/snice-skeleton.types.ts +11 -0
package/components/switch/demo.html +284 -0
package/components/switch/snice-switch.css +221 -0
package/components/switch/snice-switch.ts +229 -0
package/components/switch/snice-switch.types.ts +23 -0
package/components/symbols.ts +23 -0
package/components/table/demo-table-controller.ts +100 -0
package/components/table/demo.html +480 -0
package/components/table/snice-cell-boolean.ts +112 -0
package/components/table/snice-cell-date.ts +210 -0
package/components/table/snice-cell-duration.ts +91 -0
package/components/table/snice-cell-filesize.ts +90 -0
package/components/table/snice-cell-number.ts +165 -0
package/components/table/snice-cell-progress.ts +83 -0
package/components/table/snice-cell-rating.ts +82 -0
package/components/table/snice-cell-sparkline.ts +253 -0
package/components/table/snice-cell-text.ts +125 -0
package/components/table/snice-cell.css +296 -0
package/components/table/snice-cell.ts +473 -0
package/components/table/snice-column.ts +353 -0
package/components/table/snice-header.css +243 -0
package/components/table/snice-header.ts +261 -0
package/components/table/snice-progress.ts +66 -0
package/components/table/snice-rating.ts +45 -0
package/components/table/snice-row.css +255 -0
package/components/table/snice-row.ts +331 -0
package/components/table/snice-table.css +241 -0
package/components/table/snice-table.ts +737 -0
package/components/table/snice-table.types.ts +158 -0
package/components/tabs/demo.html +487 -0
package/components/tabs/snice-tab-panel.css +264 -0
package/components/tabs/snice-tab-panel.ts +47 -0
package/components/tabs/snice-tab.css +96 -0
package/components/tabs/snice-tab.ts +65 -0
package/components/tabs/snice-tabs.css +189 -0
package/components/tabs/snice-tabs.ts +332 -0
package/components/tabs/snice-tabs.types.ts +28 -0
package/components/theme/theme.css +234 -0
package/components/toast/demo.html +329 -0
package/components/toast/snice-toast-container.ts +256 -0
package/components/toast/snice-toast.css +213 -0
package/components/toast/snice-toast.ts +276 -0
package/components/toast/snice-toast.types.ts +35 -0
package/components/tooltip/demo.html +350 -0
package/components/tooltip/snice-tooltip-portal.css +79 -0
package/components/tooltip/snice-tooltip.css +117 -0
package/components/tooltip/snice-tooltip.ts +612 -0
package/components/tooltip/snice-tooltip.types.ts +32 -0
package/components/transitions.ts +94 -0
package/components/tsconfig.json +18 -0
package/dist/index.cjs +441 -329
package/dist/index.cjs.map +1 -1
package/dist/index.cjs.min.map +1 -1
package/dist/index.esm.js +441 -329
package/dist/index.esm.js.map +1 -1
package/dist/index.esm.min.js +3 -3
package/dist/index.esm.min.js.map +1 -1
package/dist/index.iife.js +441 -329
package/dist/index.iife.js.map +1 -1
package/dist/index.iife.min.js +3 -3
package/dist/index.iife.min.js.map +1 -1
package/dist/symbols.esm.js +1 -1
package/dist/transitions.esm.js +1 -1
package/dist/types/controller.d.ts +1 -1
package/dist/types/element.d.ts +10 -10
package/dist/types/events.d.ts +2 -2
package/dist/types/index.d.ts +1 -1
package/dist/types/observe.d.ts +1 -1
package/dist/types/request-response.d.ts +2 -3
package/dist/types/router.d.ts +1 -1
package/package.json +9 -3
package/dist/index.cjs.min +0 -15
package/dist/symbols.cjs +0 -103
package/dist/transitions.cjs +0 -219

package/components/tooltip/demo.html ADDED Viewed

@@ -0,0 +1,350 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Snice Tooltip Demo</title>
+  <style>
+    body {
+      font-family: system-ui, -apple-system, sans-serif;
+      padding: 40px;
+      line-height: 1.6;
+      background: #f5f5f5;
+    }
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      background: white;
+      padding: 40px;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+    h1 {
+      color: #333;
+      border-bottom: 2px solid #e0e0e0;
+      padding-bottom: 10px;
+    }
+    h2 {
+      color: #555;
+      margin-top: 30px;
+    }
+    .demo-section {
+      margin: 30px 0;
+    }
+    .demo-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 20px;
+      margin: 20px 0;
+    }
+    .demo-item {
+      padding: 20px;
+      background: #f8f8f8;
+      border-radius: 4px;
+      text-align: center;
+    }
+    button {
+      padding: 8px 16px;
+      background: #3b82f6;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+    }
+    button:hover {
+      background: #2563eb;
+    }
+    .edge-demo {
+      position: relative;
+      height: 300px;
+      border: 2px dashed #ccc;
+      border-radius: 4px;
+      margin: 20px 0;
+    }
+    .edge-button {
+      position: absolute;
+      padding: 6px 12px;
+      font-size: 12px;
+    }
+    .edge-button.top-left { top: 10px; left: 10px; }
+    .edge-button.top-right { top: 10px; right: 10px; }
+    .edge-button.bottom-left { bottom: 10px; left: 10px; }
+    .edge-button.bottom-right { bottom: 10px; right: 10px; }
+    .edge-button.center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
+    .custom-tooltip {
+      --tooltip-bg: #6366f1;
+      --tooltip-color: white;
+      --tooltip-radius: 12px;
+      --tooltip-padding: 12px 16px;
+    }
+    .link {
+      color: #3b82f6;
+      text-decoration: underline;
+      cursor: pointer;
+    }
+    input {
+      padding: 8px 12px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      font-size: 14px;
+    }
+    .icon {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      background: #6366f1;
+      border-radius: 50%;
+      vertical-align: middle;
+    }
+    code {
+      background: #f0f0f0;
+      padding: 2px 6px;
+      border-radius: 3px;
+      font-size: 0.9em;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>Snice Tooltip Component Demo</h1>
+    <div class="demo-section">
+      <h2>Basic Positions</h2>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <snice-tooltip content="This tooltip appears on top" position="top">
+            <button>Top</button>
+          </snice-tooltip>
+        </div>
+        <div class="demo-item">
+          <snice-tooltip content="This tooltip appears on bottom" position="bottom">
+            <button>Bottom</button>
+          </snice-tooltip>
+        </div>
+        <div class="demo-item">
+          <snice-tooltip content="This tooltip appears on left" position="left">
+            <button>Left</button>
+          </snice-tooltip>
+        </div>
+        <div class="demo-item">
+          <snice-tooltip content="This tooltip appears on right" position="right">
+            <button>Right</button>
+          </snice-tooltip>
+        </div>
+      </div>
+    </div>
+    <div class="demo-section">
+      <h2>Aligned Positions</h2>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <snice-tooltip content="Top start aligned" position="top-start">
+            <button>Top Start</button>
+          </snice-tooltip>
+        </div>
+        <div class="demo-item">
+          <snice-tooltip content="Top end aligned" position="top-end">
+            <button>Top End</button>
+          </snice-tooltip>
+        </div>
+        <div class="demo-item">
+          <snice-tooltip content="Bottom start aligned" position="bottom-start">
+            <button>Bottom Start</button>
+          </snice-tooltip>
+        </div>
+        <div class="demo-item">
+          <snice-tooltip content="Bottom end aligned" position="bottom-end">
+            <button>Bottom End</button>
+          </snice-tooltip>
+        </div>
+      </div>
+    </div>
+    <div class="demo-section">
+      <h2>Trigger Types</h2>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <snice-tooltip content="Hover to see this tooltip" trigger="hover">
+            <button>Hover Trigger</button>
+          </snice-tooltip>
+        </div>
+        <div class="demo-item">
+          <snice-tooltip content="Click to toggle this tooltip" trigger="click">
+            <button>Click Trigger</button>
+          </snice-tooltip>
+        </div>
+        <div class="demo-item">
+          <snice-tooltip content="Focus to see this tooltip" trigger="focus">
+            <input type="text" placeholder="Focus me">
+          </snice-tooltip>
+        </div>
+        <div class="demo-item">
+          <snice-tooltip content="Manually controlled tooltip" trigger="manual" id="manual-tooltip">
+            <button onclick="toggleManualTooltip()">Manual Control</button>
+          </snice-tooltip>
+        </div>
+      </div>
+    </div>
+    <div class="demo-section">
+      <h2>Delays</h2>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <snice-tooltip content="Shows after 500ms delay" delay="500">
+            <button>Show Delay (500ms)</button>
+          </snice-tooltip>
+        </div>
+        <div class="demo-item">
+          <snice-tooltip content="Hides after 500ms delay" hide-delay="500">
+            <button>Hide Delay (500ms)</button>
+          </snice-tooltip>
+        </div>
+        <div class="demo-item">
+          <snice-tooltip content="Both show and hide delays" delay="300" hide-delay="300">
+            <button>Both Delays (300ms)</button>
+          </snice-tooltip>
+        </div>
+      </div>
+    </div>
+    <div class="demo-section">
+      <h2>Customization</h2>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <snice-tooltip content="Tooltip without arrow" :arrow="false">
+            <button>No Arrow</button>
+          </snice-tooltip>
+        </div>
+        <div class="demo-item">
+          <snice-tooltip content="This tooltip has a much wider maximum width for longer content that needs more space" max-width="400">
+            <button>Wide Tooltip</button>
+          </snice-tooltip>
+        </div>
+        <div class="demo-item">
+          <snice-tooltip content="Custom styled tooltip" class="custom-tooltip">
+            <button>Custom Style</button>
+          </snice-tooltip>
+        </div>
+        <div class="demo-item">
+          <snice-tooltip content="Large offset from trigger" offset="20">
+            <button>Large Offset</button>
+          </snice-tooltip>
+        </div>
+      </div>
+    </div>
+    <div class="demo-section">
+      <h2>Smart Positioning (Edge Detection)</h2>
+      <p>Tooltips automatically adjust position when they would overflow the viewport edges.</p>
+      <div class="edge-demo">
+        <snice-tooltip content="This tooltip will flip to avoid viewport edges" position="top" class="edge-button top-left">
+          <button>Top Left</button>
+        </snice-tooltip>
+        <snice-tooltip content="This tooltip will flip to avoid viewport edges" position="top" class="edge-button top-right">
+          <button>Top Right</button>
+        </snice-tooltip>
+        <snice-tooltip content="This tooltip will flip to avoid viewport edges" position="bottom" class="edge-button bottom-left">
+          <button>Bottom Left</button>
+        </snice-tooltip>
+        <snice-tooltip content="This tooltip will flip to avoid viewport edges" position="bottom" class="edge-button bottom-right">
+          <button>Bottom Right</button>
+        </snice-tooltip>
+        <snice-tooltip content="Center positioned tooltip" position="top" class="edge-button center">
+          <button>Center</button>
+        </snice-tooltip>
+      </div>
+    </div>
+    <div class="demo-section">
+      <h2>Content Types</h2>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <snice-tooltip content="Simple text tooltip">
+            <span class="link">Text Content</span>
+          </snice-tooltip>
+        </div>
+        <div class="demo-item">
+          <snice-tooltip content="This is a very long tooltip content that will wrap to multiple lines when it reaches the maximum width of the tooltip container">
+            <span class="link">Long Content</span>
+          </snice-tooltip>
+        </div>
+        <div class="demo-item">
+          <snice-tooltip content="Tooltip on an icon">
+            <span class="icon" aria-label="Info"></span>
+          </snice-tooltip>
+        </div>
+        <div class="demo-item">
+          <snice-tooltip content="Press Ctrl+C to copy">
+            <code>npm install</code>
+          </snice-tooltip>
+        </div>
+      </div>
+    </div>
+    <div class="demo-section">
+      <h2>Programmatic Control</h2>
+      <div class="demo-grid">
+        <div class="demo-item">
+          <snice-tooltip content="Programmatically shown" trigger="manual" id="prog-tooltip">
+            <button>Target Element</button>
+          </snice-tooltip>
+          <br><br>
+          <button onclick="showProgrammatic()">Show</button>
+          <button onclick="hideProgrammatic()">Hide</button>
+        </div>
+        <div class="demo-item">
+          <snice-tooltip content="Dynamic content" trigger="hover" id="dynamic-tooltip">
+            <button onmouseenter="updateDynamicContent()">Dynamic Content</button>
+          </snice-tooltip>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script type="module">
+    import './snice-tooltip.ts';
+    // Manual tooltip control
+    window.toggleManualTooltip = function() {
+      const tooltip = document.getElementById('manual-tooltip');
+      tooltip.toggle();
+    };
+    // Programmatic control
+    window.showProgrammatic = function() {
+      const tooltip = document.getElementById('prog-tooltip');
+      tooltip.show();
+    };
+    window.hideProgrammatic = function() {
+      const tooltip = document.getElementById('prog-tooltip');
+      tooltip.hide();
+    };
+    // Dynamic content
+    let counter = 0;
+    window.updateDynamicContent = function() {
+      const tooltip = document.getElementById('dynamic-tooltip');
+      counter++;
+      tooltip.content = `Hover count: ${counter}`;
+    };
+  </script>
+</body>
+</html>

package/components/tooltip/snice-tooltip-portal.css ADDED Viewed

@@ -0,0 +1,79 @@
+.snice-tooltip--visible {
+  opacity: 1 !important;
+  transform: scale(1) !important;
+}
+.snice-tooltip__arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-color: transparent;
+}
+/* Arrow positions */
+.snice-tooltip--top .snice-tooltip__arrow,
+.snice-tooltip--top-start .snice-tooltip__arrow,
+.snice-tooltip--top-end .snice-tooltip__arrow {
+  bottom: -6px;
+  border-width: 6px 6px 0;
+  border-top-color: #333;
+}
+.snice-tooltip--bottom .snice-tooltip__arrow,
+.snice-tooltip--bottom-start .snice-tooltip__arrow,
+.snice-tooltip--bottom-end .snice-tooltip__arrow {
+  top: -6px;
+  border-width: 0 6px 6px;
+  border-bottom-color: #333;
+}
+.snice-tooltip--left .snice-tooltip__arrow,
+.snice-tooltip--left-start .snice-tooltip__arrow,
+.snice-tooltip--left-end .snice-tooltip__arrow {
+  right: -6px;
+  border-width: 6px 0 6px 6px;
+  border-left-color: #333;
+}
+.snice-tooltip--right .snice-tooltip__arrow,
+.snice-tooltip--right-start .snice-tooltip__arrow,
+.snice-tooltip--right-end .snice-tooltip__arrow {
+  left: -6px;
+  border-width: 6px 6px 6px 0;
+  border-right-color: #333;
+}
+/* Arrow alignment */
+.snice-tooltip--top .snice-tooltip__arrow,
+.snice-tooltip--bottom .snice-tooltip__arrow {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.snice-tooltip--top-start .snice-tooltip__arrow,
+.snice-tooltip--bottom-start .snice-tooltip__arrow {
+  left: 16px;
+}
+.snice-tooltip--top-end .snice-tooltip__arrow,
+.snice-tooltip--bottom-end .snice-tooltip__arrow {
+  right: 16px;
+}
+.snice-tooltip--left .snice-tooltip__arrow,
+.snice-tooltip--right .snice-tooltip__arrow {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.snice-tooltip--left-start .snice-tooltip__arrow,
+.snice-tooltip--right-start .snice-tooltip__arrow {
+  top: 16px;
+}
+.snice-tooltip--left-end .snice-tooltip__arrow,
+.snice-tooltip--right-end .snice-tooltip__arrow {
+  bottom: 16px;
+  top: auto;
+}

package/components/tooltip/snice-tooltip.css ADDED Viewed

@@ -0,0 +1,117 @@
+:host {
+  --tooltip-bg: #333;
+  --tooltip-color: white;
+  --tooltip-padding: 0.5rem 0.75rem; /* 8px 12px */
+  --tooltip-radius: 6px;
+  --tooltip-font-size: 0.875rem; /* 14px */
+  --tooltip-arrow-size: 6px;
+  --tooltip-max-width: 15.625rem; /* 250px */
+  position: relative;
+  display: inline-block;
+}
+.tooltip-trigger {
+  display: inline-block;
+}
+.tooltip {
+  position: fixed;
+  z-index: var(--tooltip-z-index, 10000);
+  padding: var(--tooltip-padding);
+  background: var(--tooltip-bg);
+  color: var(--tooltip-color);
+  border-radius: var(--tooltip-radius);
+  font-size: var(--tooltip-font-size);
+  line-height: 1.4;
+  max-width: var(--tooltip-max-width);
+  width: max-content;
+  pointer-events: none;
+  opacity: 0;
+  transform: scale(0.95);
+  transition: opacity 0.2s, transform 0.2s;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+.tooltip--visible {
+  opacity: 1;
+  transform: scale(1);
+}
+.tooltip__arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-color: transparent;
+}
+/* Arrow positions */
+.tooltip--top .tooltip__arrow,
+.tooltip--top-start .tooltip__arrow,
+.tooltip--top-end .tooltip__arrow {
+  bottom: calc(var(--tooltip-arrow-size) * -1);
+  border-width: var(--tooltip-arrow-size) var(--tooltip-arrow-size) 0;
+  border-top-color: var(--tooltip-bg);
+}
+.tooltip--bottom .tooltip__arrow,
+.tooltip--bottom-start .tooltip__arrow,
+.tooltip--bottom-end .tooltip__arrow {
+  top: calc(var(--tooltip-arrow-size) * -1);
+  border-width: 0 var(--tooltip-arrow-size) var(--tooltip-arrow-size);
+  border-bottom-color: var(--tooltip-bg);
+}
+.tooltip--left .tooltip__arrow,
+.tooltip--left-start .tooltip__arrow,
+.tooltip--left-end .tooltip__arrow {
+  right: calc(var(--tooltip-arrow-size) * -1);
+  border-width: var(--tooltip-arrow-size) 0 var(--tooltip-arrow-size) var(--tooltip-arrow-size);
+  border-left-color: var(--tooltip-bg);
+}
+.tooltip--right .tooltip__arrow,
+.tooltip--right-start .tooltip__arrow,
+.tooltip--right-end .tooltip__arrow {
+  left: calc(var(--tooltip-arrow-size) * -1);
+  border-width: var(--tooltip-arrow-size) var(--tooltip-arrow-size) var(--tooltip-arrow-size) 0;
+  border-right-color: var(--tooltip-bg);
+}
+/* Arrow alignment */
+.tooltip--top .tooltip__arrow,
+.tooltip--bottom .tooltip__arrow {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.tooltip--top-start .tooltip__arrow,
+.tooltip--bottom-start .tooltip__arrow {
+  left: 1rem; /* 16px */
+}
+.tooltip--top-end .tooltip__arrow,
+.tooltip--bottom-end .tooltip__arrow {
+  right: 1rem; /* 16px */
+}
+.tooltip--left .tooltip__arrow,
+.tooltip--right .tooltip__arrow {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.tooltip--left-start .tooltip__arrow,
+.tooltip--right-start .tooltip__arrow {
+  top: 1rem; /* 16px */
+}
+.tooltip--left-end .tooltip__arrow,
+.tooltip--right-end .tooltip__arrow {
+  bottom: 1rem; /* 16px */
+  top: auto;
+}
+[hidden] {
+  display: none !important;
+}