le-kit 0.0.3 → 0.1.1

package/dist/collection/components/le-popover/le-popover.css

@@ -0,0 +1,143 @@
+/* ============================================
+   le-popover.css
+   Popover using native HTML Popover API
+   ============================================ */
+
+:host {
+  display: inline-block;
+  position: relative;
+}
+
+/* ============================================
+   Trigger
+   ============================================ */
+
+.le-popover-trigger {
+  display: inline-flex;
+  cursor: pointer;
+}
+
+.le-popover-default-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--le-color-border, #e0e0e0);
+  border-radius: var(--le-radius-md, 6px);
+  background: var(--le-color-surface, #fff);
+  color: var(--le-color-text-secondary, #666);
+  font-size: 16px;
+  cursor: pointer;
+  transition: all var(--le-transition-fast, 0.15s ease);
+}
+
+.le-popover-default-trigger:hover {
+  border-color: var(--le-color-primary, #2196f3);
+  color: var(--le-color-primary, #2196f3);
+  background: var(--le-color-primary-light, rgba(33, 150, 243, 0.1));
+}
+
+/* ============================================
+   Popover Content (native popover)
+   ============================================ */
+
+.le-popover-content {
+  /* Reset native popover defaults */
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  
+  /* Positioning - will be set via JS */
+  position: fixed;
+  inset: unset;
+  
+  /* Styling */
+  background: var(--le-color-surface, #ffffff);
+  border: 1px solid var(--le-color-border, #e0e0e0);
+  border-radius: var(--le-radius-lg, 8px);
+  box-shadow: var(--le-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));
+  overflow: hidden;
+  font-family: var(--le-font-family, system-ui, -apple-system, sans-serif);
+  font-size: var(--le-font-size-sm, 0.875rem);
+  color: var(--le-color-text, #333);
+  
+  /* Animation */
+  opacity: 0;
+  transform: scale(0.95);
+  transition: opacity 0.15s ease, transform 0.15s ease, display 0.15s ease allow-discrete;
+}
+
+/* When popover is open */
+.le-popover-content:popover-open {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Starting style for animation (CSS Anchor Positioning spec) */
+@starting-style {
+  .le-popover-content:popover-open {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+/* ============================================
+   Header
+   ============================================ */
+
+.le-popover-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-xs, 4px) var(--le-space-sm, 8px);
+  border-bottom: 1px solid var(--le-color-border, #e0e0e0);
+  background: var(--le-color-surface-alt, #f9f9f9);
+  min-height: 32px;
+}
+
+.le-popover-title {
+  font-weight: var(--le-font-weight-semibold, 600);
+  font-size: var(--le-font-size-sm, 0.875rem);
+  color: var(--le-color-text, #333);
+}
+
+.le-popover-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--le-color-text-secondary, #666);
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  border-radius: var(--le-radius-sm, 4px);
+  transition: background-color 0.15s, color 0.15s;
+}
+
+.le-popover-close:hover {
+  background: var(--le-color-surface-hover, rgba(0, 0, 0, 0.05));
+  color: var(--le-color-text, #333);
+}
+
+/* ============================================
+   Body
+   ============================================ */
+
+.le-popover-body {
+  padding: var(--le-space-md, 12px);
+}
+
+/* ============================================
+   Scrollable content
+   ============================================ */
+
+.le-popover-content[style*="overflow-y: auto"] .le-popover-body {
+  overflow-y: auto;
+}