seblify 0.2.0 → 0.3.0

package/dist/components/display/data-display/visual/timeline/context.js

@@ -0,0 +1,14 @@
+import { getContext, setContext } from 'svelte';
+const timelineContextKey = Symbol('seblify-timeline');
+export function setTimelineContext(value) {
+    setContext(timelineContextKey, value);
+}
+export function getTimelineContext() {
+    return (getContext(timelineContextKey) ?? {
+        align: 'start',
+        contentSide: 'end',
+        labelSide: 'start',
+        orientation: 'vertical',
+        tone: 'primary',
+    });
+}

package/dist/components/display/feedback/loading/loading-dots/LoadingDots.svelte

@@ -25,8 +25,8 @@
   class:size-md={size === 'md'}
   class:size-sm={size === 'sm'}
   class:size-xs={size === 'xs'}
-  data-tone={tone}
-  class="loading-dots"
+  data-seblify-tone={tone ?? 'inherit'}
+  class="loading-dots seblify-tone-context"
   role="status"
 >
   <span></span>
@@ -34,86 +34,174 @@
   <span></span>
 </span>
 
-<style>
-  .loading-dots {
+<style>:where(.seblify-tone-context) {
+  --seblify-tone-fill: var(--seblify-color-fill-neutral, #516176);
+  --seblify-tone-fill-text: var(--seblify-color-fill-neutral-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-muted, #d9e0e8);
+  --seblify-tone-text: var(--seblify-color-text-muted, #516176);
+  --seblify-tone-border: var(--seblify-color-border, #c8d2df);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='inherit']) {
+  --seblify-tone-fill: var(
+    --seblify-current-tone-fill,
+    var(--seblify-color-fill-neutral, #516176)
+  );
+  --seblify-tone-fill-text: var(
+    --seblify-current-tone-fill-text,
+    var(--seblify-color-fill-neutral-text, #ffffff)
+  );
+  --seblify-tone-surface: var(
+    --seblify-current-tone-surface,
+    var(--seblify-color-surface-muted, #d9e0e8)
+  );
+  --seblify-tone-text: var(
+    --seblify-current-tone-text,
+    var(--seblify-color-text-muted, #516176)
+  );
+  --seblify-tone-border: var(
+    --seblify-current-tone-border,
+    var(--seblify-color-border, #c8d2df)
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-tone='neutral']) {
+  --seblify-tone-fill: var(--seblify-color-fill-neutral, #516176);
+  --seblify-tone-fill-text: var(--seblify-color-fill-neutral-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-muted, #d9e0e8);
+  --seblify-tone-text: var(--seblify-color-text-muted, #516176);
+  --seblify-tone-border: var(--seblify-color-border, #c8d2df);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='strong']) {
+  --seblify-tone-fill: var(--seblify-color-fill-strong, #172033);
+  --seblify-tone-fill-text: var(--seblify-color-fill-strong-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-raised, #ffffff);
+  --seblify-tone-text: var(--seblify-color-text, #172033);
+  --seblify-tone-border: var(--seblify-color-border-strong, #aab7c5);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='primary']) {
+  --seblify-tone-fill: var(--seblify-color-fill-primary, #146a6f);
+  --seblify-tone-fill-text: var(--seblify-color-fill-primary-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-accent, #f7fbfb);
+  --seblify-tone-text: var(--seblify-color-fill-primary, #146a6f);
+  --seblify-tone-border: var(--seblify-color-border-accent, #9ab7ba);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='secondary']) {
+  --seblify-tone-fill: var(--seblify-color-fill-secondary, #5b5fc7);
+  --seblify-tone-fill-text: var(
+    --seblify-color-fill-secondary-text,
+    #ffffff
+  );
+  --seblify-tone-surface: var(--seblify-color-secondary-surface, #f0efff);
+  --seblify-tone-text: var(--seblify-color-secondary-text, #2f316f);
+  --seblify-tone-border: var(--seblify-color-secondary-border, #c8c6f4);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='success']) {
+  --seblify-tone-fill: var(--seblify-color-fill-success, #1f7a3f);
+  --seblify-tone-fill-text: var(--seblify-color-fill-success-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-success-surface, #e8f8ee);
+  --seblify-tone-text: var(--seblify-color-success-text, #143d25);
+  --seblify-tone-border: var(--seblify-color-success-border, #b8ddc7);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='danger']) {
+  --seblify-tone-fill: var(--seblify-color-fill-danger, #c93434);
+  --seblify-tone-fill-text: var(--seblify-color-fill-danger-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-error-surface, #fff0f0);
+  --seblify-tone-text: var(--seblify-color-error-text, #5a1717);
+  --seblify-tone-border: var(--seblify-color-error-border, #efb6b6);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='warning']) {
+  --seblify-tone-fill: var(--seblify-color-fill-warning, #8a5a00);
+  --seblify-tone-fill-text: var(--seblify-color-fill-warning-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-warning-surface, #fff6d8);
+  --seblify-tone-text: var(--seblify-color-warning-text, #4d3900);
+  --seblify-tone-border: var(--seblify-color-warning-border, #e8d28f);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='info']) {
+  --seblify-tone-fill: var(--seblify-color-fill-info, #1f6fb2);
+  --seblify-tone-fill-text: var(--seblify-color-fill-info-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-info-surface, #eaf3ff);
+  --seblify-tone-text: var(--seblify-color-info-text, #102f55);
+  --seblify-tone-border: var(--seblify-color-info-border, #bfd1ea);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='inverse']) {
+  --seblify-tone-fill: var(--seblify-color-fill-inverse, #172033);
+  --seblify-tone-fill-text: var(--seblify-color-fill-inverse-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-inverse-hover, #263043);
+  --seblify-tone-text: var(--seblify-color-fill-inverse-text, #ffffff);
+  --seblify-tone-border: var(--seblify-color-border-inverse, #263043);
+}
+
+:where(.seblify-tone-publisher) {
+  --seblify-current-tone-fill: var(--seblify-tone-fill);
+  --seblify-current-tone-fill-text: var(--seblify-tone-fill-text);
+  --seblify-current-tone-surface: var(--seblify-tone-surface);
+  --seblify-current-tone-text: var(--seblify-tone-text);
+  --seblify-current-tone-border: var(--seblify-tone-border);
+}
+
+.loading-dots {
+    --loading-dots-resolved-size: var(
+      --dot-size,
+      var(--seblify-current-size, 8px)
+    );
+    --loading-dots-resolved-gap: var(
+      --dot-gap,
+      max(3px, calc(var(--loading-dots-resolved-size) * 0.625))
+    );
+
     display: inline-flex;
-    gap: var(--dot-gap, var(--seblify-current-loading-dots-gap, 5px));
+    gap: var(--loading-dots-resolved-gap);
     align-items: center;
     width: fit-content;
-    color: var(
-      --loading-dots-color,
-      var(
-        --seblify-current-tone-fill,
-        var(--seblify-color-fill-primary, #146a6f)
-      )
-    );
+    color: var(--seblify-tone-fill);
   }
 
-  .size-sm {
+.size-sm {
     --dot-size: 6px;
     --dot-gap: 4px;
   }
 
-  .size-xs {
+.size-xs {
     --dot-size: 4px;
     --dot-gap: 3px;
   }
 
-  .size-md {
+.size-md {
     --dot-size: 8px;
     --dot-gap: 5px;
   }
 
-  .size-lg {
+.size-lg {
     --dot-size: 11px;
     --dot-gap: 7px;
   }
 
-  .loading-dots[data-tone='neutral'] {
-    --loading-dots-color: var(--seblify-color-fill-neutral, #516176);
-  }
-
-  .loading-dots[data-tone='primary'] {
-    --loading-dots-color: var(--seblify-color-fill-primary, #146a6f);
-  }
-
-  .loading-dots[data-tone='success'] {
-    --loading-dots-color: var(--seblify-color-fill-success, #1f7a3f);
-  }
-
-  .loading-dots[data-tone='danger'] {
-    --loading-dots-color: var(--seblify-color-fill-danger, #c93434);
-  }
-
-  .loading-dots[data-tone='warning'] {
-    --loading-dots-color: var(--seblify-color-fill-warning, #8a5a00);
-  }
-
-  .loading-dots[data-tone='info'] {
-    --loading-dots-color: var(--seblify-color-fill-info, #1f6fb2);
-  }
-
-  .loading-dots[data-tone='inverse'] {
-    --loading-dots-color: var(--seblify-color-fill-inverse, #172033);
-  }
-
-  span span {
-    width: var(--dot-size, var(--seblify-current-loading-dot-size, 8px));
-    height: var(--dot-size, var(--seblify-current-loading-dot-size, 8px));
+span span {
+    width: var(--loading-dots-resolved-size);
+    height: var(--loading-dots-resolved-size);
     border-radius: 999px;
     background: currentColor;
     animation: pulse 900ms ease-in-out infinite;
   }
 
-  span span:nth-child(2) {
+span span:nth-child(2) {
     animation-delay: 120ms;
   }
 
-  span span:nth-child(3) {
+span span:nth-child(3) {
     animation-delay: 240ms;
   }
 
-  @keyframes pulse {
+@keyframes pulse {
     0%,
     80%,
     100% {
@@ -127,7 +215,7 @@
     }
   }
 
-  @media (prefers-reduced-motion: reduce) {
+@media (prefers-reduced-motion: reduce) {
     span span {
       animation: none;
       opacity: 0.75;

package/dist/components/display/feedback/loading/spinner/Spinner.svelte

@@ -25,84 +25,172 @@
   class:size-lg={size === 'lg'}
   class:size-sm={size === 'sm'}
   class:size-xs={size === 'xs'}
-  class="spinner"
-  data-tone={tone}
+  class="spinner seblify-tone-context"
+  data-seblify-tone={tone ?? 'inherit'}
   role="status"
 ></span>
 
-<style>
-  .spinner {
-    display: inline-block;
-    width: var(--spinner-size, var(--seblify-current-spinner-size, 26px));
-    height: var(--spinner-size, var(--seblify-current-spinner-size, 26px));
-    border: var(--spinner-width, var(--seblify-current-spinner-width, 3px))
-      solid var(--seblify-color-border, #c8d2df);
-    border-top-color: var(
-      --spinner-color,
-      var(
-        --seblify-current-tone-fill,
-        var(--seblify-color-fill-primary, #146a6f)
-      )
+<style>:where(.seblify-tone-context) {
+  --seblify-tone-fill: var(--seblify-color-fill-neutral, #516176);
+  --seblify-tone-fill-text: var(--seblify-color-fill-neutral-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-muted, #d9e0e8);
+  --seblify-tone-text: var(--seblify-color-text-muted, #516176);
+  --seblify-tone-border: var(--seblify-color-border, #c8d2df);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='inherit']) {
+  --seblify-tone-fill: var(
+    --seblify-current-tone-fill,
+    var(--seblify-color-fill-neutral, #516176)
+  );
+  --seblify-tone-fill-text: var(
+    --seblify-current-tone-fill-text,
+    var(--seblify-color-fill-neutral-text, #ffffff)
+  );
+  --seblify-tone-surface: var(
+    --seblify-current-tone-surface,
+    var(--seblify-color-surface-muted, #d9e0e8)
+  );
+  --seblify-tone-text: var(
+    --seblify-current-tone-text,
+    var(--seblify-color-text-muted, #516176)
+  );
+  --seblify-tone-border: var(
+    --seblify-current-tone-border,
+    var(--seblify-color-border, #c8d2df)
+  );
+}
+
+:where(.seblify-tone-context[data-seblify-tone='neutral']) {
+  --seblify-tone-fill: var(--seblify-color-fill-neutral, #516176);
+  --seblify-tone-fill-text: var(--seblify-color-fill-neutral-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-muted, #d9e0e8);
+  --seblify-tone-text: var(--seblify-color-text-muted, #516176);
+  --seblify-tone-border: var(--seblify-color-border, #c8d2df);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='strong']) {
+  --seblify-tone-fill: var(--seblify-color-fill-strong, #172033);
+  --seblify-tone-fill-text: var(--seblify-color-fill-strong-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-raised, #ffffff);
+  --seblify-tone-text: var(--seblify-color-text, #172033);
+  --seblify-tone-border: var(--seblify-color-border-strong, #aab7c5);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='primary']) {
+  --seblify-tone-fill: var(--seblify-color-fill-primary, #146a6f);
+  --seblify-tone-fill-text: var(--seblify-color-fill-primary-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-accent, #f7fbfb);
+  --seblify-tone-text: var(--seblify-color-fill-primary, #146a6f);
+  --seblify-tone-border: var(--seblify-color-border-accent, #9ab7ba);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='secondary']) {
+  --seblify-tone-fill: var(--seblify-color-fill-secondary, #5b5fc7);
+  --seblify-tone-fill-text: var(
+    --seblify-color-fill-secondary-text,
+    #ffffff
+  );
+  --seblify-tone-surface: var(--seblify-color-secondary-surface, #f0efff);
+  --seblify-tone-text: var(--seblify-color-secondary-text, #2f316f);
+  --seblify-tone-border: var(--seblify-color-secondary-border, #c8c6f4);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='success']) {
+  --seblify-tone-fill: var(--seblify-color-fill-success, #1f7a3f);
+  --seblify-tone-fill-text: var(--seblify-color-fill-success-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-success-surface, #e8f8ee);
+  --seblify-tone-text: var(--seblify-color-success-text, #143d25);
+  --seblify-tone-border: var(--seblify-color-success-border, #b8ddc7);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='danger']) {
+  --seblify-tone-fill: var(--seblify-color-fill-danger, #c93434);
+  --seblify-tone-fill-text: var(--seblify-color-fill-danger-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-error-surface, #fff0f0);
+  --seblify-tone-text: var(--seblify-color-error-text, #5a1717);
+  --seblify-tone-border: var(--seblify-color-error-border, #efb6b6);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='warning']) {
+  --seblify-tone-fill: var(--seblify-color-fill-warning, #8a5a00);
+  --seblify-tone-fill-text: var(--seblify-color-fill-warning-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-warning-surface, #fff6d8);
+  --seblify-tone-text: var(--seblify-color-warning-text, #4d3900);
+  --seblify-tone-border: var(--seblify-color-warning-border, #e8d28f);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='info']) {
+  --seblify-tone-fill: var(--seblify-color-fill-info, #1f6fb2);
+  --seblify-tone-fill-text: var(--seblify-color-fill-info-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-info-surface, #eaf3ff);
+  --seblify-tone-text: var(--seblify-color-info-text, #102f55);
+  --seblify-tone-border: var(--seblify-color-info-border, #bfd1ea);
+}
+
+:where(.seblify-tone-context[data-seblify-tone='inverse']) {
+  --seblify-tone-fill: var(--seblify-color-fill-inverse, #172033);
+  --seblify-tone-fill-text: var(--seblify-color-fill-inverse-text, #ffffff);
+  --seblify-tone-surface: var(--seblify-color-surface-inverse-hover, #263043);
+  --seblify-tone-text: var(--seblify-color-fill-inverse-text, #ffffff);
+  --seblify-tone-border: var(--seblify-color-border-inverse, #263043);
+}
+
+:where(.seblify-tone-publisher) {
+  --seblify-current-tone-fill: var(--seblify-tone-fill);
+  --seblify-current-tone-fill-text: var(--seblify-tone-fill-text);
+  --seblify-current-tone-surface: var(--seblify-tone-surface);
+  --seblify-current-tone-text: var(--seblify-tone-text);
+  --seblify-current-tone-border: var(--seblify-tone-border);
+}
+
+.spinner {
+    --spinner-resolved-size: var(
+      --spinner-size,
+      var(--seblify-current-size, 26px)
+    );
+    --spinner-resolved-width: var(
+      --spinner-width,
+      max(2px, calc(var(--spinner-resolved-size) / 9))
     );
+
+    display: inline-block;
+    width: var(--spinner-resolved-size);
+    height: var(--spinner-resolved-size);
+    border: var(--spinner-resolved-width) solid
+      var(--seblify-color-border, #c8d2df);
+    border-top-color: var(--seblify-tone-fill);
     border-radius: 999px;
     animation: spin 800ms linear infinite;
   }
 
-  .size-sm {
+.size-sm {
     --spinner-size: 18px;
     --spinner-width: 2px;
   }
 
-  .size-xs {
+.size-xs {
     --spinner-size: 14px;
     --spinner-width: 2px;
   }
 
-  .size-md {
+.size-md {
     --spinner-size: 26px;
     --spinner-width: 3px;
   }
 
-  .size-lg {
+.size-lg {
     --spinner-size: 38px;
     --spinner-width: 4px;
   }
 
-  .spinner[data-tone='neutral'] {
-    --spinner-color: var(--seblify-color-fill-neutral, #516176);
-  }
-
-  .spinner[data-tone='primary'] {
-    --spinner-color: var(--seblify-color-fill-primary, #146a6f);
-  }
-
-  .spinner[data-tone='success'] {
-    --spinner-color: var(--seblify-color-fill-success, #1f7a3f);
-  }
-
-  .spinner[data-tone='danger'] {
-    --spinner-color: var(--seblify-color-fill-danger, #c93434);
-  }
-
-  .spinner[data-tone='warning'] {
-    --spinner-color: var(--seblify-color-fill-warning, #8a5a00);
-  }
-
-  .spinner[data-tone='info'] {
-    --spinner-color: var(--seblify-color-fill-info, #1f6fb2);
-  }
-
-  .spinner[data-tone='inverse'] {
-    --spinner-color: var(--seblify-color-fill-inverse, #172033);
-  }
-
-  @keyframes spin {
+@keyframes spin {
     to {
       transform: rotate(360deg);
     }
   }
 
-  @media (prefers-reduced-motion: reduce) {
+@media (prefers-reduced-motion: reduce) {
     .spinner {
       animation-duration: 1400ms;
     }

package/dist/components/display/media/icon/IconGlyph.svelte

@@ -33,8 +33,14 @@
 <style>
   .icon {
     display: inline-block;
-    width: var(--icon-size, var(--seblify-current-icon-size, 24px));
-    height: var(--icon-size, var(--seblify-current-icon-size, 24px));
+    width: var(
+      --icon-size,
+      var(--seblify-current-size, var(--seblify-current-icon-size, 24px))
+    );
+    height: var(
+      --icon-size,
+      var(--seblify-current-size, var(--seblify-current-icon-size, 24px))
+    );
     flex: 0 0 auto;
     color: currentColor;
     line-height: 0;

package/dist/components/display/motion/collapse/Collapse.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import type { CustomCssSize, SeblifyProps } from 'seblify';
+  import type { Snippet } from 'svelte';
+
+  type CollapseElement = keyof HTMLElementTagNameMap;
+
+  type Props = SeblifyProps<{
+    [key: string]: unknown;
+    as?: CollapseElement;
+    children?: Snippet;
+    class?: string;
+    closeEasing?: string;
+    collapsedHeight?: number | CustomCssSize;
+    duration?: number;
+    easing?: string;
+    expanded?: boolean;
+    openEasing?: string;
+  }>;
+
+  let {
+    as = 'div',
+    children,
+    class: className,
+    closeEasing = 'cubic-bezier(0, 0, 0.2, 1)',
+    collapsedHeight = 0,
+    duration = 220,
+    easing,
+    expanded = false,
+    openEasing = 'cubic-bezier(0, 0, 0.2, 1)',
+    ...restProps
+  }: Props = $props();
+
+  let contentElement: HTMLDivElement | undefined;
+  let measuredHeight = $state(0);
+
+  function cssLength(value: number | CustomCssSize): string {
+    return typeof value === 'number' ? `${Math.max(0, value)}px` : value;
+  }
+
+  function cssDuration(value: number): string {
+    if (!Number.isFinite(value)) {
+      return '0ms';
+    }
+
+    return `${Math.max(0, value)}ms`;
+  }
+
+  function measureContentHeight() {
+    measuredHeight = contentElement?.scrollHeight ?? 0;
+  }
+
+  const collapsedHeightValue = $derived(cssLength(collapsedHeight));
+  const durationValue = $derived(cssDuration(duration));
+  const expandedHeightValue = $derived(`${measuredHeight}px`);
+  const resolvedHeight = $derived(
+    expanded ? expandedHeightValue : collapsedHeightValue,
+  );
+  const resolvedEasing = $derived(
+    easing ?? (expanded ? openEasing : closeEasing),
+  );
+
+  $effect(() => {
+    if (!contentElement) {
+      return;
+    }
+
+    measureContentHeight();
+
+    if (typeof ResizeObserver === 'undefined') {
+      return;
+    }
+
+    const observer = new ResizeObserver(measureContentHeight);
+    observer.observe(contentElement);
+
+    return () => {
+      observer.disconnect();
+    };
+  });
+</script>
+
+<svelte:element
+  this={as}
+  {...restProps}
+  class={`collapse${className ? ` ${className}` : ''}`}
+  data-state={expanded ? 'expanded' : 'collapsed'}
+  style:--collapse-collapsed-height={collapsedHeightValue}
+  style:--collapse-duration={durationValue}
+  style:--collapse-easing={resolvedEasing}
+  style:--collapse-expanded-height={expandedHeightValue}
+  style:--collapse-height={resolvedHeight}
+>
+  <div class="collapse__content" bind:this={contentElement}>
+    {@render children?.()}
+  </div>
+</svelte:element>
+
+<style>
+  .collapse {
+    display: block;
+    height: var(--collapse-height);
+    overflow: hidden;
+    transition: height var(--collapse-duration) var(--collapse-easing);
+  }
+
+  .collapse__content {
+    min-height: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .collapse {
+      transition-duration: 0ms;
+    }
+  }
+</style>

package/dist/components/display/motion/collapse/Collapse.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { CustomCssSize } from 'seblify';
+import type { Snippet } from 'svelte';
+type CollapseElement = keyof HTMLElementTagNameMap;
+declare const Collapse: import("svelte").Component<{
+    [x: string]: unknown;
+    as?: CollapseElement | undefined;
+    children?: Snippet | undefined;
+    class?: string | undefined;
+    closeEasing?: string | undefined;
+    collapsedHeight?: (number | CustomCssSize) | undefined;
+    duration?: number | undefined;
+    easing?: string | undefined;
+    expanded?: boolean | undefined;
+    openEasing?: string | undefined;
+}, {}, "">;
+type Collapse = ReturnType<typeof Collapse>;
+export default Collapse;