@fluid-theme/core 0.4.3

package/src/components/chip.css

@@ -0,0 +1,143 @@
+/**
+ * Fluid Framework - Chip / Filter Tag Component
+ * @layer components
+ *
+ * Dismissable tags for active filters, selections, and removable items.
+ *
+ * Usage:
+ *   <span class="chip">
+ *     <span class="chip__label">Color: Blue</span>
+ *     <button class="chip__remove" aria-label="Remove Color: Blue filter">&times;</button>
+ *   </span>
+ *
+ *   <!-- Non-dismissable (no remove button) -->
+ *   <span class="chip">
+ *     <span class="chip__label">Category</span>
+ *   </span>
+ *
+ *   <!-- Active filter bar -->
+ *   <div class="chip-group">
+ *     <span class="chip">...</span>
+ *     <span class="chip">...</span>
+ *     <button class="chip-group__clear" data-variant="ghost" data-size="sm">Clear All</button>
+ *   </div>
+ *
+ * Variants: data-variant="filled|outline"
+ */
+
+@layer components {
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-1) var(--space-3);
+    font-size: var(--font-size-sm);
+    line-height: var(--leading-tight);
+    color: var(--color-text);
+    background: var(--color-surface);
+    border: var(--border-width) solid var(--color-border);
+    border-radius: var(--radius-full);
+    white-space: nowrap;
+    transition: background-color var(--duration-fast) var(--ease-fluid);
+  }
+
+  .chip:hover {
+    background: var(--color-surface-raised);
+  }
+
+  .chip__label {
+    padding-inline-end: var(--space-1);
+  }
+
+  .chip__remove {
+    --_btn-bg: transparent;
+    --_btn-shadow: none;
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
+    padding: 0;
+    border-radius: var(--radius-full);
+    font-size: var(--font-size-sm);
+    line-height: 1;
+    color: var(--color-text-muted);
+    cursor: pointer;
+    transition: color var(--duration-fast) var(--ease-fluid),
+                background-color var(--duration-fast) var(--ease-fluid);
+  }
+
+  .chip__remove:hover {
+    color: var(--color-error);
+    background: var(--color-error-subtle);
+  }
+
+  .chip__remove:focus-visible {
+    color: var(--color-error);
+    box-shadow: var(--shadow-glow);
+  }
+
+  /* Extend touch target to 44px minimum */
+  .chip__remove::before {
+    content: "";
+    position: absolute;
+    inset: -0.75rem;
+  }
+
+
+  /* ========================================
+     VARIANTS
+     ======================================== */
+
+  .chip[data-variant="filled"] {
+    background: var(--accent-subtle);
+    border-color: transparent;
+    color: var(--accent);
+  }
+
+  .chip[data-variant="filled"]:hover {
+    background: var(--accent);
+    color: var(--white);
+  }
+
+  .chip[data-variant="filled"]:hover .chip__remove:hover {
+    color: var(--white);
+    background: oklch(from var(--accent) calc(l - 0.1) c h);
+  }
+
+  .chip[data-variant="outline"] {
+    background: transparent;
+  }
+
+
+  /* ========================================
+     CHIP GROUP
+     Container for active filter chips
+     ======================================== */
+
+  .chip-group {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .chip-group__clear {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+  }
+
+
+  /* ========================================
+     REDUCED MOTION
+     ======================================== */
+
+  @media (prefers-reduced-motion: reduce) {
+    .chip,
+    .chip__remove {
+      transition: none;
+    }
+  }
+}

package/src/components/dropdown.css

@@ -0,0 +1,335 @@
+/**
+ * Fluid Framework - Dropdown/Select Component
+ * @layer components
+ *
+ * Standalone dropdown menus for actions, selections, and context menus.
+ * Separate from nav dropdowns — usable anywhere in the page.
+ *
+ * Usage:
+ *   <div class="dropdown">
+ *     <button class="dropdown__trigger">
+ *       Options
+ *       <svg class="dropdown__chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
+ *     </button>
+ *     <div class="dropdown__menu">
+ *       <a href="#" class="dropdown__item">Edit</a>
+ *       <a href="#" class="dropdown__item">Duplicate</a>
+ *       <div class="dropdown__divider"></div>
+ *       <a href="#" class="dropdown__item" data-danger>Delete</a>
+ *     </div>
+ *   </div>
+ *
+ * Positions: data-position="top|bottom-end|top-end"
+ * Widths: data-width="auto|full|fixed"
+ */
+
+@layer components {
+  /* ========================================
+     DROPDOWN CONTAINER
+     ======================================== */
+
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+
+
+  /* ========================================
+     DROPDOWN TRIGGER
+     ======================================== */
+
+  .dropdown__trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  .dropdown__chevron {
+    inline-size: 1rem;
+    block-size: 1rem;
+    flex-shrink: 0;
+    transition: transform var(--duration-fast) var(--ease-settle);
+  }
+
+  /* Rotate chevron when open */
+  .dropdown[open] .dropdown__chevron,
+  .dropdown[data-open] .dropdown__chevron {
+    transform: rotate(180deg);
+  }
+
+
+  /* ========================================
+     DROPDOWN MENU
+     ======================================== */
+
+  .dropdown__menu {
+    /* Positioning */
+    position: absolute;
+    z-index: var(--z-dropdown);
+    inset-block-start: calc(100% + var(--space-1));
+    inset-inline-start: 0;
+
+    /* Sizing */
+    min-inline-size: 12rem;
+    max-inline-size: min(calc(100vw - 2rem), 20rem);
+    max-block-size: 20rem;
+    overflow-y: auto;
+
+    /* Visual */
+    background: var(--color-surface-raised);
+    border: var(--border-width) solid var(--color-border-subtle);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    padding: var(--space-1);
+
+    /* Hidden by default */
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-4px) scale(0.98);
+    pointer-events: none;
+
+    /* Transitions */
+    transition:
+      opacity var(--duration-fast) var(--ease-fluid),
+      transform var(--duration-fast) var(--ease-settle),
+      visibility var(--duration-fast) var(--ease-fluid);
+  }
+
+  /* Show on hover or when open attribute/data-open is present */
+  .dropdown:hover > .dropdown__menu,
+  .dropdown:focus-within > .dropdown__menu,
+  .dropdown[open] > .dropdown__menu,
+  .dropdown[data-open] > .dropdown__menu {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0) scale(1);
+    pointer-events: auto;
+  }
+
+  /* Scrollbar styling */
+  .dropdown__menu::-webkit-scrollbar {
+    inline-size: 4px;
+  }
+
+  .dropdown__menu::-webkit-scrollbar-thumb {
+    background: var(--color-border);
+    border-radius: var(--radius-full);
+  }
+
+
+  /* ========================================
+     POSITION VARIANTS
+     ======================================== */
+
+  /* Bottom-end (right-aligned) */
+  .dropdown[data-position="bottom-end"] .dropdown__menu {
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+  }
+
+  /* Top (above trigger) */
+  .dropdown[data-position="top"] .dropdown__menu {
+    inset-block-start: auto;
+    inset-block-end: calc(100% + var(--space-1));
+    transform: translateY(4px) scale(0.98);
+  }
+
+  .dropdown[data-position="top"]:hover > .dropdown__menu,
+  .dropdown[data-position="top"]:focus-within > .dropdown__menu,
+  .dropdown[data-position="top"][open] > .dropdown__menu,
+  .dropdown[data-position="top"][data-open] > .dropdown__menu {
+    transform: translateY(0) scale(1);
+  }
+
+  /* Top-end */
+  .dropdown[data-position="top-end"] .dropdown__menu {
+    inset-block-start: auto;
+    inset-block-end: calc(100% + var(--space-1));
+    inset-inline-start: auto;
+    inset-inline-end: 0;
+    transform: translateY(4px) scale(0.98);
+  }
+
+  .dropdown[data-position="top-end"]:hover > .dropdown__menu,
+  .dropdown[data-position="top-end"]:focus-within > .dropdown__menu,
+  .dropdown[data-position="top-end"][open] > .dropdown__menu,
+  .dropdown[data-position="top-end"][data-open] > .dropdown__menu {
+    transform: translateY(0) scale(1);
+  }
+
+
+  /* ========================================
+     WIDTH VARIANTS
+     ======================================== */
+
+  .dropdown[data-width="full"] .dropdown__menu {
+    inline-size: 100%;
+    min-inline-size: 100%;
+  }
+
+  .dropdown[data-width="fixed"] .dropdown__menu {
+    inline-size: 16rem;
+  }
+
+
+  /* ========================================
+     DROPDOWN ITEMS
+     ======================================== */
+
+  .dropdown__item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-sm);
+    color: var(--color-text);
+    text-decoration: none;
+    cursor: pointer;
+    white-space: nowrap;
+    transition:
+      background-color var(--duration-fast) var(--ease-fluid),
+      color var(--duration-fast) var(--ease-fluid);
+  }
+
+  .dropdown__item:hover {
+    background: color-mix(in oklch, var(--accent) 10%, var(--color-background));
+    color: var(--accent);
+  }
+
+  .dropdown__item:focus-visible {
+    outline: 2px solid var(--color-focus);
+    outline-offset: -2px;
+  }
+
+  /* Active/selected item */
+  .dropdown__item[aria-selected="true"],
+  .dropdown__item[data-active] {
+    background: color-mix(in oklch, var(--accent) 12%, var(--color-background));
+    color: var(--accent);
+    font-weight: var(--weight-medium);
+  }
+
+  /* Disabled item */
+  .dropdown__item[aria-disabled="true"],
+  .dropdown__item[disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  /* Danger item */
+  .dropdown__item[data-danger] {
+    color: var(--color-error);
+  }
+
+  .dropdown__item[data-danger]:hover {
+    background: var(--color-error-subtle);
+    color: var(--color-error);
+  }
+
+
+  /* ========================================
+     DROPDOWN EXTRAS
+     ======================================== */
+
+  /* Divider line */
+  .dropdown__divider {
+    block-size: 1px;
+    margin: var(--space-1) 0;
+    background: var(--color-border-subtle);
+  }
+
+  /* Section header */
+  .dropdown__header {
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--font-size-xs);
+    font-weight: var(--weight-semibold);
+    color: var(--color-text-subtle);
+    text-transform: uppercase;
+    letter-spacing: var(--tracking-wider);
+  }
+
+  /* Item icon slot */
+  .dropdown__item-icon {
+    inline-size: 1rem;
+    block-size: 1rem;
+    flex-shrink: 0;
+    color: var(--color-text-muted);
+  }
+
+  .dropdown__item:hover .dropdown__item-icon {
+    color: inherit;
+  }
+
+  /* Item description (secondary text) */
+  .dropdown__item-desc {
+    font-size: var(--font-size-xs);
+    color: var(--color-text-subtle);
+    font-weight: var(--weight-normal);
+  }
+
+  /* Keyboard shortcut hint */
+  .dropdown__shortcut {
+    margin-inline-start: auto;
+    font-size: var(--font-size-xs);
+    color: var(--color-text-subtle);
+    font-family: var(--font-mono);
+  }
+
+
+  /* ========================================
+     THEME-SPECIFIC STYLES
+     ======================================== */
+
+  /* Still: no animation */
+  [data-motion="still"] .dropdown__menu {
+    transition: none;
+  }
+
+  [data-motion="still"] .dropdown__chevron {
+    transition: none;
+  }
+
+  /* Serene: extra rounded */
+  [data-motion="serene"] .dropdown__menu {
+    border-radius: var(--radius-xl);
+  }
+
+  [data-motion="serene"] .dropdown__item {
+    border-radius: var(--radius-lg);
+  }
+
+  /* Cascade: bouncy */
+  [data-motion="cascade"] .dropdown__menu {
+    border-radius: var(--radius-xl);
+  }
+
+  /* Rapids: offset shadow */
+  [data-motion="rapids"] .dropdown__menu {
+    box-shadow: var(--shadow-offset);
+  }
+
+  /* Tsunami: asymmetric */
+  [data-motion="tsunami"] .dropdown__menu {
+    border-radius: var(--radius-asymmetric, 0 24px 0 0);
+  }
+
+
+  /* ========================================
+     REDUCED MOTION
+     ======================================== */
+
+  @media (prefers-reduced-motion: reduce) {
+    .dropdown__menu {
+      transition: none;
+    }
+
+    .dropdown__chevron {
+      transition: none;
+    }
+
+    .dropdown__item {
+      transition: none;
+    }
+  }
+}

package/src/components/empty-state.css

@@ -0,0 +1,105 @@
+/**
+ * Fluid Framework - Empty State Component
+ * @layer components
+ *
+ * Empty states appear when lists, tables, or content areas have no items.
+ * They guide the user toward their first action.
+ *
+ * Usage:
+ *   <div class="empty-state">
+ *     <div class="empty-state__icon">🔍</div>
+ *     <h3 class="empty-state__title">No results found</h3>
+ *     <p class="empty-state__description">Try adjusting your search or clearing filters.</p>
+ *     <div class="empty-state__actions">
+ *       <button>Clear Filters</button>
+ *     </div>
+ *   </div>
+ *
+ * Variants: data-size="sm|lg"
+ */
+
+@layer components {
+  .empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: var(--space-10) var(--space-5);
+    gap: var(--space-3);
+    max-inline-size: 28rem;
+    margin-inline: auto;
+  }
+
+  .empty-state__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 4rem;
+    block-size: 4rem;
+    border-radius: var(--radius-full);
+    background: var(--color-surface);
+    color: var(--color-text-muted);
+    font-size: var(--font-size-2xl);
+    margin-block-end: var(--space-2);
+  }
+
+  .empty-state__icon svg {
+    inline-size: 2rem;
+    block-size: 2rem;
+  }
+
+  .empty-state__title {
+    font-size: var(--font-size-lg);
+    font-weight: var(--weight-semibold);
+    color: var(--color-text);
+    margin: 0;
+  }
+
+  .empty-state__description {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+    max-inline-size: 24rem;
+    margin: 0;
+  }
+
+  .empty-state__actions {
+    display: flex;
+    gap: var(--space-3);
+    margin-block-start: var(--space-3);
+  }
+
+
+  /* ========================================
+     SIZE VARIANTS
+     ======================================== */
+
+  .empty-state[data-size="sm"] {
+    padding: var(--space-6) var(--space-4);
+    gap: var(--space-2);
+  }
+
+  .empty-state[data-size="sm"] .empty-state__icon {
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    font-size: var(--font-size-lg);
+  }
+
+  .empty-state[data-size="sm"] .empty-state__title {
+    font-size: var(--font-size-base);
+  }
+
+  .empty-state[data-size="lg"] {
+    padding: var(--space-16) var(--space-6);
+    gap: var(--space-4);
+  }
+
+  .empty-state[data-size="lg"] .empty-state__icon {
+    inline-size: 5rem;
+    block-size: 5rem;
+    font-size: var(--font-size-3xl);
+  }
+
+  .empty-state[data-size="lg"] .empty-state__title {
+    font-size: var(--font-size-xl);
+  }
+}