@fluid-theme/core 0.4.3

package/src/components/accordion.css

@@ -0,0 +1,250 @@
+/**
+ * Fluid Framework - Accordion/Collapse Component
+ * @layer components
+ *
+ * Accordion for collapsible content sections.
+ * Built on native <details>/<summary> for zero-JS operation.
+ * CSS transitions for smooth open/close animations.
+ *
+ * Usage:
+ *   <div class="accordion">
+ *     <details class="accordion__item">
+ *       <summary class="accordion__trigger">Section Title</summary>
+ *       <div class="accordion__content">
+ *         <div class="accordion__body">Content here</div>
+ *       </div>
+ *     </details>
+ *   </div>
+ *
+ * Variants:
+ *   data-variant="bordered"  — card-like bordered items
+ *   data-variant="separated" — spaced apart with elevation
+ *   data-variant="flush"     — minimal, no borders
+ *
+ * Single open: Add name="" attribute to details elements
+ *   (exclusive accordion behavior, native HTML)
+ */
+
+@layer components {
+  /* ========================================
+     ACCORDION CONTAINER
+     ======================================== */
+
+  .accordion {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  /* Separated variant: gap between items */
+  .accordion[data-variant="separated"] {
+    gap: var(--space-3);
+  }
+
+
+  /* ========================================
+     ACCORDION ITEM
+     ======================================== */
+
+  .accordion__item {
+    border-block-end: var(--border-width) solid var(--color-border-subtle);
+  }
+
+  .accordion__item:first-of-type {
+    border-block-start: var(--border-width) solid var(--color-border-subtle);
+  }
+
+  /* Bordered variant: each item is a card */
+  .accordion[data-variant="bordered"] .accordion__item {
+    border: var(--border-width) solid var(--color-border-subtle);
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+  }
+
+  .accordion[data-variant="bordered"] .accordion__item:first-of-type {
+    border-block-start: var(--border-width) solid var(--color-border-subtle);
+  }
+
+  /* Separated variant: elevated card items */
+  .accordion[data-variant="separated"] .accordion__item {
+    border: var(--border-width) solid var(--color-border-subtle);
+    border-radius: var(--radius-lg);
+    background: var(--color-surface-raised);
+    box-shadow: var(--shadow-xs);
+    overflow: hidden;
+  }
+
+  /* Flush variant: no borders at all */
+  .accordion[data-variant="flush"] .accordion__item {
+    border: none;
+  }
+
+  .accordion[data-variant="flush"] .accordion__item:first-of-type {
+    border: none;
+  }
+
+
+  /* ========================================
+     ACCORDION TRIGGER (summary element)
+     ======================================== */
+
+  .accordion__trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-4);
+
+    padding: var(--space-4) var(--space-5);
+    cursor: pointer;
+    font-weight: var(--weight-semibold);
+    font-size: var(--font-size-base);
+    line-height: var(--leading-snug);
+    color: var(--color-text);
+    list-style: none; /* Remove default marker */
+
+    transition:
+      color var(--duration-fast) var(--ease-fluid),
+      background-color var(--duration-fast) var(--ease-fluid);
+  }
+
+  /* Remove default summary marker across browsers */
+  .accordion__trigger::-webkit-details-marker {
+    display: none;
+  }
+
+  .accordion__trigger::marker {
+    content: "";
+  }
+
+  /* Chevron icon */
+  .accordion__trigger::after {
+    content: "";
+    flex-shrink: 0;
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
+    background-color: var(--color-text-muted);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
+    transition: transform var(--duration-normal) var(--ease-settle);
+  }
+
+  /* Rotate chevron when open */
+  .accordion__item[open] > .accordion__trigger::after {
+    transform: rotate(180deg);
+  }
+
+  /* Hover */
+  .accordion__trigger:hover {
+    color: var(--accent);
+    background-color: color-mix(in oklch, var(--accent) 5%, transparent);
+  }
+
+  /* Focus */
+  .accordion__trigger:focus-visible {
+    outline: 2px solid var(--color-focus);
+    outline-offset: -2px;
+    border-radius: var(--radius-sm);
+  }
+
+
+  /* ========================================
+     ACCORDION CONTENT
+     ======================================== */
+
+  .accordion__content {
+    overflow: hidden;
+  }
+
+  .accordion__body {
+    padding: 0 var(--space-5) var(--space-5);
+    color: var(--color-text-muted);
+    font-size: var(--font-size-base);
+    line-height: var(--leading-normal);
+  }
+
+  /* Extra spacing for body content */
+  .accordion__body > * + * {
+    margin-block-start: var(--space-3);
+  }
+
+
+  /* ========================================
+     SIZE VARIANTS
+     ======================================== */
+
+  /* Compact */
+  .accordion[data-size="sm"] .accordion__trigger {
+    padding: var(--space-3) var(--space-4);
+    font-size: var(--font-size-sm);
+  }
+
+  .accordion[data-size="sm"] .accordion__body {
+    padding: 0 var(--space-4) var(--space-4);
+    font-size: var(--font-size-sm);
+  }
+
+  .accordion[data-size="sm"] .accordion__trigger::after {
+    inline-size: 1rem;
+    block-size: 1rem;
+  }
+
+  /* Large */
+  .accordion[data-size="lg"] .accordion__trigger {
+    padding: var(--space-5) var(--space-6);
+    font-size: var(--font-size-lg);
+  }
+
+  .accordion[data-size="lg"] .accordion__body {
+    padding: 0 var(--space-6) var(--space-6);
+  }
+
+
+  /* ========================================
+     THEME-SPECIFIC STYLES
+     ======================================== */
+
+  /* Still: no animation */
+  [data-motion="still"] .accordion__trigger::after {
+    transition: none;
+  }
+
+  /* Serene: rounded, soft */
+  [data-motion="serene"] .accordion[data-variant="separated"] .accordion__item,
+  [data-motion="serene"] .accordion[data-variant="bordered"] .accordion__item {
+    border-radius: var(--radius-xl);
+  }
+
+  /* Cascade: bouncy, bubbly */
+  [data-motion="cascade"] .accordion[data-variant="separated"] .accordion__item,
+  [data-motion="cascade"] .accordion[data-variant="bordered"] .accordion__item {
+    border-radius: var(--radius-xl);
+  }
+
+  /* Rapids: hard shadow on separated */
+  [data-motion="rapids"] .accordion[data-variant="separated"] .accordion__item {
+    box-shadow: var(--shadow-offset);
+  }
+
+  /* Tsunami: asymmetric corners */
+  [data-motion="tsunami"] .accordion[data-variant="separated"] .accordion__item,
+  [data-motion="tsunami"] .accordion[data-variant="bordered"] .accordion__item {
+    border-radius: var(--radius-asymmetric, 0 24px 0 0);
+  }
+
+
+  /* ========================================
+     REDUCED MOTION
+     ======================================== */
+
+  @media (prefers-reduced-motion: reduce) {
+    .accordion__trigger {
+      transition: none;
+    }
+
+    .accordion__trigger::after {
+      transition: none;
+    }
+  }
+}

package/src/components/alert.css

@@ -0,0 +1,453 @@
+/**
+ * Fluid Framework - Alert & Toast Component
+ * @layer components
+ *
+ * Alerts for inline feedback messages.
+ * Toasts for transient notifications (positioned fixed).
+ *
+ * Alert Usage:
+ *   <div class="alert" data-status="info">
+ *     <p>This is an informational message.</p>
+ *   </div>
+ *
+ *   <div class="alert" data-status="success" data-dismissible>
+ *     <div class="alert__content">
+ *       <strong class="alert__title">Success!</strong>
+ *       <p>Your changes have been saved.</p>
+ *     </div>
+ *     <button class="alert__close" aria-label="Dismiss">&times;</button>
+ *   </div>
+ *
+ * Statuses: data-status="info|success|warning|error"
+ * Variants: data-variant="filled|outline|subtle" (default: subtle)
+ *
+ * Toast Usage:
+ *   <div class="toast-container" data-position="top-right">
+ *     <div class="toast" data-status="success">
+ *       <div class="toast__content">
+ *         <strong>Saved</strong>
+ *         <p>Your changes are live.</p>
+ *       </div>
+ *     </div>
+ *   </div>
+ */
+
+@layer components {
+  /* ========================================
+     ALERT - Inline Messages
+     ======================================== */
+
+  .alert {
+    --_alert-color: var(--color-info);
+    --_alert-bg: var(--color-info-subtle);
+    --_alert-border: var(--color-info);
+
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-3);
+    padding: var(--space-4) var(--space-5);
+    border-radius: var(--radius-lg);
+    border-inline-start: 3px solid var(--_alert-border);
+    background: var(--_alert-bg);
+    color: var(--color-text);
+    font-size: var(--font-size-sm);
+    line-height: var(--leading-normal);
+
+    transition:
+      opacity var(--duration-normal) var(--ease-fluid),
+      transform var(--duration-normal) var(--ease-settle);
+  }
+
+
+  /* ========================================
+     STATUS VARIANTS
+     ======================================== */
+
+  .alert[data-status="success"] {
+    --_alert-color: var(--color-success);
+    --_alert-bg: var(--color-success-subtle);
+    --_alert-border: var(--color-success);
+  }
+
+  .alert[data-status="warning"] {
+    --_alert-color: var(--color-warning);
+    --_alert-bg: var(--color-warning-subtle);
+    --_alert-border: var(--color-warning);
+  }
+
+  .alert[data-status="error"] {
+    --_alert-color: var(--color-error);
+    --_alert-bg: var(--color-error-subtle);
+    --_alert-border: var(--color-error);
+  }
+
+  .alert[data-status="info"] {
+    --_alert-color: var(--color-info);
+    --_alert-bg: var(--color-info-subtle);
+    --_alert-border: var(--color-info);
+  }
+
+
+  /* ========================================
+     VISUAL VARIANTS
+     ======================================== */
+
+  /* Filled: solid background */
+  .alert[data-variant="filled"] {
+    background: var(--_alert-color);
+    color: var(--white);
+    border-inline-start: none;
+  }
+
+  .alert[data-variant="filled"] .alert__title {
+    color: inherit;
+  }
+
+  /* Outline: border only */
+  .alert[data-variant="outline"] {
+    background: transparent;
+    border: var(--border-width) solid var(--_alert-border);
+    border-inline-start-width: 3px;
+  }
+
+
+  /* ========================================
+     ALERT STRUCTURE
+     ======================================== */
+
+  /* Icon placeholder (before content) */
+  .alert__icon {
+    flex-shrink: 0;
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
+    color: var(--_alert-color);
+    margin-block-start: 1px;
+  }
+
+  .alert__content {
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  .alert__title {
+    font-weight: var(--weight-semibold);
+    color: var(--_alert-color);
+    margin-block-end: var(--space-1);
+    display: block;
+  }
+
+  .alert__content p {
+    margin: 0;
+  }
+
+  .alert__close {
+    --_btn-bg: transparent;
+    --_btn-shadow: none;
+
+    position: relative;
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    padding: 0;
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-lg);
+    line-height: 1;
+    color: var(--color-text-muted);
+    cursor: pointer;
+    transition: color var(--duration-fast) var(--ease-fluid);
+  }
+
+  /* Extend touch target to 44px minimum */
+  .alert__close::before {
+    content: "";
+    position: absolute;
+    inset: -0.625rem;
+  }
+
+  .alert__close:hover {
+    color: var(--color-text);
+  }
+
+  /* Dismissing animation */
+  .alert[data-dismissing] {
+    opacity: 0;
+    transform: translateX(var(--space-4));
+  }
+
+
+  /* ========================================
+     TOAST CONTAINER
+     Fixed position notification area
+     ======================================== */
+
+  .toast-container {
+    position: fixed;
+    z-index: var(--z-toast);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    padding: var(--space-5);
+    pointer-events: none;
+    max-inline-size: min(100%, 24rem);
+  }
+
+  /* Positions */
+  .toast-container[data-position="top-right"],
+  .toast-container:not([data-position]) {
+    inset-block-start: 0;
+    inset-inline-end: 0;
+  }
+
+  .toast-container[data-position="top-left"] {
+    inset-block-start: 0;
+    inset-inline-start: 0;
+  }
+
+  .toast-container[data-position="bottom-right"] {
+    inset-block-end: 0;
+    inset-inline-end: 0;
+  }
+
+  .toast-container[data-position="bottom-left"] {
+    inset-block-end: 0;
+    inset-inline-start: 0;
+  }
+
+  .toast-container[data-position="top-center"] {
+    inset-block-start: 0;
+    inset-inline-start: 50%;
+    translate: -50% 0;
+  }
+
+  .toast-container[data-position="bottom-center"] {
+    inset-block-end: 0;
+    inset-inline-start: 50%;
+    translate: -50% 0;
+  }
+
+
+  /* ========================================
+     TOAST - Individual Notification
+     ======================================== */
+
+  .toast {
+    --_toast-accent: var(--color-info);
+
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-3);
+    padding: var(--space-4);
+    padding-inline-start: calc(var(--space-4) + 3px);
+    background: var(--color-surface-raised);
+    border: var(--border-width) solid var(--color-border-subtle);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    pointer-events: auto;
+    inline-size: 100%;
+
+    /* Entry animation */
+    animation: toast-in var(--duration-normal) var(--ease-settle) both;
+  }
+
+  .toast[data-status="success"] { --_toast-accent: var(--color-success); }
+  .toast[data-status="warning"] { --_toast-accent: var(--color-warning); }
+  .toast[data-status="error"]   { --_toast-accent: var(--color-error); }
+  .toast[data-status="info"]    { --_toast-accent: var(--color-info); }
+
+  /* Accent bar */
+  .toast::before {
+    content: "";
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inline-size: 3px;
+    block-size: 100%;
+    background: var(--_toast-accent);
+    border-radius: var(--radius-full) 0 0 var(--radius-full);
+  }
+
+  .toast__icon {
+    flex-shrink: 0;
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
+    color: var(--_toast-accent);
+    margin-block-start: 1px;
+  }
+
+  .toast__content {
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  .toast__content strong {
+    display: block;
+    font-weight: var(--weight-semibold);
+    margin-block-end: var(--space-1);
+  }
+
+  .toast__content p {
+    margin: 0;
+    font-size: var(--font-size-sm);
+    color: var(--color-text-muted);
+  }
+
+  .toast__close {
+    --_btn-bg: transparent;
+    --_btn-shadow: none;
+
+    position: relative;
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    padding: 0;
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-base);
+    color: var(--color-text-subtle);
+    cursor: pointer;
+  }
+
+  /* Extend touch target to 44px minimum */
+  .toast__close::before {
+    content: "";
+    position: absolute;
+    inset: -0.625rem;
+  }
+
+  .toast__close:hover {
+    color: var(--color-text);
+  }
+
+  /* Toast action (undo link, etc.) */
+  .toast__action {
+    display: inline-flex;
+    align-items: center;
+    padding: var(--space-1) var(--space-2);
+    margin-block-start: var(--space-2);
+    font-size: var(--font-size-sm);
+    font-weight: var(--weight-semibold);
+    color: var(--_toast-accent);
+    background: transparent;
+    border: var(--border-width) solid var(--_toast-accent);
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    text-decoration: none;
+    transition: background-color var(--duration-fast) var(--ease-fluid);
+  }
+
+  .toast__action:hover {
+    background: var(--_toast-accent);
+    color: var(--white);
+  }
+
+  /* Auto-dismiss progress bar */
+  .toast[data-auto-dismiss]::after {
+    content: "";
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    block-size: 2px;
+    background: var(--_toast-accent);
+    animation: toast-progress var(--_toast-duration, 4s) linear both;
+  }
+
+  @keyframes toast-progress {
+    from { inline-size: 100%; }
+    to { inline-size: 0%; }
+  }
+
+  /* Exit animation */
+  .toast[data-dismissing] {
+    animation: toast-out var(--duration-fast) var(--ease-fluid) both;
+  }
+
+
+  /* ========================================
+     TOAST ANIMATIONS
+     ======================================== */
+
+  @keyframes toast-in {
+    from {
+      opacity: 0;
+      transform: translateY(-8px) scale(0.96);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  @keyframes toast-out {
+    to {
+      opacity: 0;
+      transform: translateX(100%) scale(0.96);
+    }
+  }
+
+
+  /* ========================================
+     THEME-SPECIFIC STYLES
+     ======================================== */
+
+  /* Still: no animations */
+  [data-motion="still"] .toast {
+    animation: none;
+  }
+
+  /* Rapids: offset shadow */
+  [data-motion="rapids"] .toast {
+    box-shadow: var(--shadow-offset);
+  }
+
+  [data-motion="rapids"] .alert {
+    border-inline-start-width: 4px;
+  }
+
+  /* Tsunami: asymmetric */
+  [data-motion="tsunami"] .toast {
+    border-radius: var(--radius-asymmetric, 0 24px 0 0);
+  }
+
+  [data-motion="tsunami"] .alert {
+    border-radius: var(--radius-asymmetric, 0 24px 0 0);
+  }
+
+
+  /* ========================================
+     RESPONSIVE
+     ======================================== */
+
+  @media (max-width: 40rem) {
+    .toast-container {
+      max-inline-size: 100%;
+      padding: var(--space-3);
+    }
+  }
+
+
+  /* ========================================
+     REDUCED MOTION
+     ======================================== */
+
+  @media (prefers-reduced-motion: reduce) {
+    .alert {
+      transition: none;
+    }
+
+    .toast {
+      animation: none;
+    }
+
+    .toast[data-dismissing] {
+      animation: none;
+      opacity: 0;
+    }
+  }
+}