@fluid-theme/core 0.4.3

package/src/components/scroll-progress.css

@@ -0,0 +1,104 @@
+/**
+ * Scroll Progress Indicator
+ *
+ * A thin bar showing page scroll position.
+ * Position and animation direction matches the motion style.
+ *
+ * Usage: Add {% include scroll-progress.html %} to your layout
+ *
+ * Data attributes:
+ *   data-position="top" | "bottom" | "left" | "right"
+ *   data-hidden - Hide the indicator
+ */
+
+@layer components {
+  .scroll-progress {
+    --_progress: 0;
+    --_size: 3px;
+
+    position: fixed;
+    z-index: var(--z-sticky);
+    background-color: var(--accent);
+    pointer-events: none;
+    opacity: 0.8;
+    transition: opacity var(--duration-normal) var(--ease-fluid);
+  }
+
+  /* Hide when at top of page or when disabled */
+  .scroll-progress[data-hidden],
+  .scroll-progress[data-progress="0"] {
+    opacity: 0;
+  }
+
+  /* Top position (default) - horizontal bar */
+  .scroll-progress,
+  .scroll-progress[data-position="top"] {
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    block-size: var(--_size);
+    inline-size: calc(var(--_progress) * 100%);
+  }
+
+  /* Bottom position - horizontal bar */
+  .scroll-progress[data-position="bottom"] {
+    inset-block-end: 0;
+    inset-block-start: auto;
+    inset-inline-start: 0;
+    block-size: var(--_size);
+    inline-size: calc(var(--_progress) * 100%);
+  }
+
+  /* Left position - vertical bar */
+  .scroll-progress[data-position="left"] {
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inline-size: var(--_size);
+    block-size: calc(var(--_progress) * 100%);
+  }
+
+  /* Right position - vertical bar */
+  .scroll-progress[data-position="right"] {
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inset-inline-start: auto;
+    inline-size: var(--_size);
+    block-size: calc(var(--_progress) * 100%);
+  }
+
+  /* Motion style adjustments */
+  /* Still: No progress bar by default */
+  [data-motion="still"] .scroll-progress {
+    display: none;
+  }
+
+  /* Serene/Stream: Very thin, subtle */
+  [data-motion="serene"] .scroll-progress,
+  [data-motion="stream"] .scroll-progress {
+    --_size: 2px;
+    opacity: 0.5;
+  }
+
+  /* Flowing: Standard */
+  [data-motion="flowing"] .scroll-progress {
+    --_size: 3px;
+  }
+
+  /* Cascade: Slightly thicker */
+  [data-motion="cascade"] .scroll-progress {
+    --_size: 4px;
+  }
+
+  /* Rapids/Tsunami: Bold */
+  [data-motion="rapids"] .scroll-progress,
+  [data-motion="tsunami"] .scroll-progress {
+    --_size: 5px;
+    opacity: 0.9;
+  }
+
+  /* Reduced motion: instant updates */
+  @media (prefers-reduced-motion: reduce) {
+    .scroll-progress {
+      transition: none;
+    }
+  }
+}

package/src/components/search-input.css

@@ -0,0 +1,125 @@
+/**
+ * Fluid Framework - Search Input Component
+ * @layer components
+ *
+ * Styled search input with embedded clear button.
+ *
+ * Usage:
+ *   <div class="search-input">
+ *     <svg class="search-input__icon">...</svg>
+ *     <input type="search" class="search-input__field" placeholder="Search...">
+ *     <button class="search-input__clear" aria-label="Clear search" hidden>&times;</button>
+ *   </div>
+ *
+ * The clear button should be shown/hidden via JS when the input has a value.
+ * Sizes: data-size="sm|lg"
+ */
+
+@layer components {
+  .search-input {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .search-input__icon {
+    position: absolute;
+    inset-inline-start: var(--space-3);
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
+    color: var(--color-text-muted);
+    pointer-events: none;
+    z-index: var(--z-raised);
+  }
+
+  .search-input__field {
+    inline-size: 100%;
+    padding-inline-start: var(--space-10);
+    padding-inline-end: var(--space-10);
+  }
+
+  /* Hide native search cancel button (webkit) */
+  .search-input__field::-webkit-search-cancel-button {
+    display: none;
+  }
+
+  .search-input__clear {
+    --_btn-bg: transparent;
+    --_btn-shadow: none;
+
+    position: absolute;
+    inset-inline-end: var(--space-2);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 1.75rem;
+    block-size: 1.75rem;
+    padding: 0;
+    border-radius: var(--radius-full);
+    font-size: var(--font-size-lg);
+    color: var(--color-text-muted);
+    cursor: pointer;
+    z-index: var(--z-raised);
+    transition: color var(--duration-fast) var(--ease-fluid),
+                background-color var(--duration-fast) var(--ease-fluid);
+  }
+
+  .search-input__clear:hover {
+    color: var(--color-text);
+    background-color: var(--color-surface);
+  }
+
+  .search-input__clear:focus-visible {
+    color: var(--color-text);
+    box-shadow: var(--shadow-glow);
+  }
+
+  /* Hidden by default, shown via JS when input has value */
+  .search-input__clear[hidden] {
+    display: none;
+  }
+
+
+  /* ========================================
+     SIZE VARIANTS
+     ======================================== */
+
+  .search-input[data-size="sm"] .search-input__icon {
+    inset-inline-start: var(--space-2);
+    inline-size: 1rem;
+    block-size: 1rem;
+  }
+
+  .search-input[data-size="sm"] .search-input__field {
+    padding-inline-start: var(--space-8);
+    padding-inline-end: var(--space-8);
+  }
+
+  .search-input[data-size="sm"] .search-input__clear {
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    font-size: var(--font-size-base);
+  }
+
+  .search-input[data-size="lg"] .search-input__field {
+    padding-inline-start: var(--space-12);
+    padding-inline-end: var(--space-12);
+  }
+
+  .search-input[data-size="lg"] .search-input__icon {
+    inset-inline-start: var(--space-4);
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+  }
+
+
+  /* ========================================
+     REDUCED MOTION
+     ======================================== */
+
+  @media (prefers-reduced-motion: reduce) {
+    .search-input__clear {
+      transition: none;
+    }
+  }
+}