@dvcol/neo-svelte 1.1.2 → 1.2.0

package/dist/list/NeoListBaseItem.svelte

@@ -2,13 +2,16 @@
   import type { NeoListBaseItemProps } from './neo-list-base-item.model.js';
   import type { NeoListItem } from './neo-list.model.js';
 
-  import { getFocusableElement } from '@dvcol/common-utils/common/element';
+  import { getFocusableElement, getLastFocusableElement } from '@dvcol/common-utils/common/element';
   import { getUUID } from '@dvcol/common-utils/common/string';
 
   import NeoButton from '../buttons/NeoButton.svelte';
-  import IconArrow from '../icons/IconArrow.svelte';
-  import IconCheckbox from '../icons/IconCheckbox.svelte';
-  import NeoSkeletonText from '../skeletons/NeoSkeletonText.svelte';
+  import { NeoIconArrowDirection } from '../icons/index.js';
+  import NeoIconArrow from '../icons/NeoIconArrow.svelte';
+  import NeoIconCheckbox from '../icons/NeoIconCheckbox.svelte';
+  import { isButtonTag } from './neo-list.model.js';
+  import NeoMedia from '../media/NeoMedia.svelte';
+  import NeoPill from '../pill/NeoPill.svelte';
   import NeoMark from '../text/NeoMark.svelte';
 
   let {
@@ -22,27 +25,36 @@
     context,
 
     // List State
+    tag = 'div',
+    buttonRef = $bindable(),
     select,
     checked,
     touched = $bindable(false),
     disabled: _disabled,
     readonly: _readonly,
-    skeleton,
     highlight,
-    selector = '.neo-list-item.neo-list-item-select',
+    selector = '.neo-list-item',
+    flip,
     arrow,
     toggle,
     rounded,
+    reverse,
+    ellipsis,
 
     // Buttons Props
     hovered = $bindable(false),
     focused = $bindable(false),
+    glass,
+    tinted,
+    filled,
 
     // Actions
     onclick,
 
     // Other props
     buttonProps,
+    mediaProps,
+    markProps,
     ...rest
   }: NeoListBaseItemProps = $props();
 
@@ -51,70 +63,158 @@
     touched = true;
   });
 
+  const getFocusable = (action: 'next' | 'previous', ...args: Parameters<typeof getFocusableElement>) => {
+    if (action === 'previous') return getLastFocusableElement(...args);
+    return getFocusableElement(...args);
+  };
+
   const getNextTarget = (element: EventTarget | HTMLElement | null, action: 'next' | 'previous') => {
     const sibling: keyof HTMLElement = `${action}ElementSibling`;
     if (!(element instanceof HTMLElement)) return;
     let li = element?.closest<HTMLElement>(selector);
     let next = li?.[sibling];
-    let target = getFocusableElement(next);
+    let target = getFocusable(action, next);
     if (target) return target.focus();
     while (next?.[sibling]) {
       if (target) return target.focus();
       next = next?.[sibling];
-      target = getFocusableElement(next);
+      target = getFocusable(action, next);
     }
     if (!li?.parentElement || li?.dataset?.section === undefined) return;
     li = li.parentElement.closest<HTMLElement>(selector);
-    return getFocusableElement(li?.[sibling])?.focus();
+    return getFocusable(action, li?.[sibling])?.focus();
   };
 
+  const lines = $derived.by(() => {
+    const _lines = {
+      label: typeof ellipsis === 'number' ? ellipsis : ellipsis?.label,
+      description: typeof ellipsis === 'number' ? ellipsis : ellipsis?.description,
+    };
+    return {
+      ..._lines,
+      total: ((_lines?.label ?? 0) + (_lines?.description ?? 0)),
+    };
+  });
+
   const button = $derived(item?.href || item?.onclick || onclick || select);
   const labelId = $derived(button ? `neo-list-item-label-${getUUID()}` : undefined);
   const disabled = $derived(_disabled || item?.disabled);
   const readonly = $derived(_readonly || item?.readonly);
 </script>
 
-{#snippet listItem({ label, value, description }: NeoListItem)}
-  <div class:neo-list-item-content={true} class:neo-button={button} class:neo-disabled={disabled} class:neo-description={description}>
-    {#if item.before ?? before}
-      <div class="neo-list-item-before" class:neo-skeleton={skeleton}>
-        {@render (item.before ?? before)?.({ item, index, checked, context })}
-      </div>
+{#snippet beforeItem()}
+  {#if item.before ?? before}
+    <div class="neo-list-item-before">
+      {@render (item.before ?? before)?.({ item, index, checked, context })}
+    </div>
+  {/if}
+{/snippet}
+
+{#snippet afterItem()}
+  {#if item.after ?? after}
+    <div class="neo-list-item-after">
+      {@render (item.after ?? after)?.({ item, index, checked, context })}
+    </div>
+  {/if}
+{/snippet}
+
+{#snippet listItem({ label, value, description, tags }: NeoListItem)}
+  <svelte:element
+    this={tag}
+    class:neo-list-item-content={true}
+    class:neo-button={button}
+    class:neo-rounded={rounded}
+    class:neo-disabled={disabled}
+    class:neo-description={description}
+    class:neo-reverse={reverse || item.reverse}
+    style:--neo-list-item-label-lines={lines?.label}
+    style:--neo-list-item-description-lines={lines?.description}
+    {...rest}
+  >
+
+    {#if !reverse}
+      {@render beforeItem()}
+    {:else}
+      {@render afterItem()}
     {/if}
 
-    <NeoSkeletonText
-      loading={!!skeleton}
-      disabled={skeleton === undefined}
-      lines="auto"
-      fallback={description ? 2 : 1}
-      align="center"
-      {...rest}
-      class={['neo-list-item-skeleton', rest?.class]}
-    >
-      <div class="neo-list-item-text">
-        <span id={labelId} class="neo-list-item-label">
-          <NeoMark value={label ?? value?.toString()} filter={highlight} />
+    {#if item.media}
+      {@const { image, ...media } = item.media}
+      <NeoMedia class="neo-list-item-media" elevation={(hovered || focused) ? 2 : 1} {rounded} {...mediaProps} {...media} image={{ ...mediaProps?.image, ...image }} />
+    {/if}
+
+    <div class="neo-list-item-text">
+      <span id={labelId} class="neo-list-item-label" class:neo-header={(tags?.length && description) || ((lines?.description ?? 0) > 3)}>
+        <NeoMark {...markProps} value={label ?? value?.toString()} filter={highlight} />
+      </span>
+      {#if tags?.length}
+        <div class="neo-list-item-tags">
+          {#each tags as tag, i (i)}
+            {#if typeof tag === 'string'}
+              <span class="neo-list-item-tag">{tag}</span>
+            {:else if isButtonTag(tag)}
+              <NeoButton
+                elevation={0}
+                text
+                {rounded}
+                {disabled}
+                propagation={false}
+                {...tag}
+                class={['neo-list-item-tag', tag?.class]}
+                onkeydown={(e) => {
+                  if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                    if (e.key === 'ArrowDown') getNextTarget(e.target, 'next');
+                    else buttonRef?.focus();
+                    e.preventDefault();
+                  }
+                  tag?.onkeydown?.(e);
+                }}
+              />
+            {:else}
+              <NeoPill
+                elevation={0}
+                text
+                {rounded}
+                {disabled}
+                {...tag}
+                class={['neo-list-item-tag', tag?.class]}
+              />
+            {/if}
+          {/each}
+        </div>
+      {/if}
+      {#if description}
+        <span class="neo-list-item-description">
+          <NeoMark {...markProps} value={description} filter={highlight} />
         </span>
-        {#if description}
-          <span class="neo-list-item-description">
-            <NeoMark value={description} filter={highlight} />
-          </span>
-        {/if}
-      </div>
-    </NeoSkeletonText>
+      {/if}
+    </div>
 
-    {#if item.after ?? after}
-      <div class="neo-list-item-after" class:neo-skeleton={skeleton}>
-        {@render (item.after ?? after)?.({ item, index, checked, context })}
-      </div>
+    {#if !reverse}
+      {@render afterItem()}
+    {:else}
+      {@render beforeItem()}
     {/if}
-  </div>
+  </svelte:element>
+{/snippet}
+
+{#snippet affix()}
+  {#if select}
+    <div class="neo-list-item-checkmark" class:neo-reverse={reverse}>
+      <NeoIconCheckbox {checked} enter={touched} />
+    </div>
+  {:else if arrow}
+    <div class="neo-list-item-arrow">
+      <NeoIconArrow expanded={checked && !disabled && !readonly} chevron direction={reverse ? NeoIconArrowDirection.Left : NeoIconArrowDirection.Right} />
+    </div>
+  {/if}
 {/snippet}
 
 {#if item?.render}
   {@render item?.render({ item, index, checked, context })}
 {:else if button}
   <NeoButton
+    bind:ref={buttonRef}
     bind:hovered
     bind:focused
     data-select={checked}
@@ -128,6 +228,9 @@
     {readonly}
     {disabled}
     {rounded}
+    {glass}
+    {tinted}
+    {filled}
     href={item?.href}
     onclick={(e) => {
       if (disabled) return;
@@ -139,7 +242,9 @@
     onkeydown={(e) => {
       if (disabled) return;
       if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-        getNextTarget(e.target, e.key === 'ArrowDown' ? 'next' : 'previous');
+        let action: 'next' | 'previous' = e.key === 'ArrowDown' ? 'next' : 'previous';
+        if (flip) action = action === 'next' ? 'previous' : 'next';
+        getNextTarget(e.target, action);
         e.preventDefault();
       }
       buttonProps?.onkeydown?.(e);
@@ -148,67 +253,117 @@
     {...item?.buttonProps}
     class={['neo-list-item-button', buttonProps?.class, item?.buttonProps?.class]}
   >
+    {#if reverse}
+      {@render affix()}
+    {/if}
+
     {@render listItem(item)}
 
-    {#if select}
-      <div class="neo-list-item-checkmark" class:neo-skeleton={skeleton}>
-        <IconCheckbox {checked} enter={touched} />
-      </div>
-    {:else if arrow}
-      <div class="neo-list-item-arrow" class:neo-skeleton={skeleton}>
-        <IconArrow expanded={checked && !disabled && !readonly} chevron />
-      </div>
+    {#if !reverse}
+      {@render affix()}
     {/if}
   </NeoButton>
 {:else}
   {@render listItem(item)}
 {/if}
 
-<style>.neo-list-item-label, .neo-list-item-description {
+<style>.neo-list-item-label {
   display: -webkit-box;
-  -webkit-line-clamp: var(--neo-ellipsis-lines, 1);
+  -webkit-line-clamp: var(--neo-list-item-label-lines, 1);
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-word;
-}
-.neo-list-item-label {
+  overflow-wrap: anywhere;
   line-height: var(--neo-line-height-sm, 1.25rem);
 }
+.neo-list-item-label.neo-header {
+  font-weight: var(--neo-font-weight-md, 500);
+}
 .neo-list-item-description {
-  --neo-ellipsis-lines: 2;
+  display: -webkit-box;
+  -webkit-line-clamp: var(--neo-list-item-description-lines, 2);
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+  overflow-wrap: anywhere;
   color: var(--neo-text-color-secondary);
   font-size: var(--neo-font-size-sm, 0.875rem);
   line-height: var(--neo-line-height-sm, 1.25rem);
   transition: color 0.15s ease;
 }
+.neo-list-item-text {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+.neo-list-item-text:has(> .neo-list-item-label.neo-header) {
+  gap: var(--neo-list-item-text-gap, var(--neo-gap-5xs, 0.125rem));
+}
+.neo-list-item-tags {
+  --neo-btn-padding: var(--neo-gap-5xs, 0.125rem) var(--neo-gap-3xs, 0.3125rem);
+  --neo-btn-margin: 0;
+  --neo-pill-padding: var(--neo-gap-5xs, 0.125rem) var(--neo-gap-3xs, 0.3125rem);
+  --neo-pill-margin: 0;
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0 var(--neo-gap-xxs, 0.5rem);
+  align-items: center;
+  color: var(--neo-text-color-secondary);
+  font-weight: var(--neo-font-weight-sm, 300);
+  font-size: var(--neo-font-size-sm, 0.875rem);
+  line-height: var(--neo-line-height-sm, 1.25rem);
+  transition: color 0.15s ease;
+}
+.neo-list-item-tags :global(.neo-list-item-tag.neo-pill.neo-borderless.neo-flat) {
+  --neo-pill-margin: 0 calc(0% - var(--neo-gap-3xs, 0.312 ));
+}
+.neo-list-item-tags :global(.neo-list-item-tag.neo-button.neo-borderless.neo-flat) {
+  --neo-btn-margin: 0 calc(0% - var(--neo-gap-3xs, 0.3125rem ));
+}
+.neo-list-item-tags :global(.neo-list-item-tag.neo-pill.neo-borderless.neo-flat:first-child) {
+  margin-inline-start: calc(-0.0625rem - var(--neo-gap-3xs, 0.3125rem));
+}
+.neo-list-item-tags :global(.neo-list-item-tag.neo-button.neo-borderless.neo-flat:first-child) {
+  margin-inline-start: calc(-0.0625rem - var(--neo-gap-3xs, 0.3125rem));
+}
 .neo-list-item-content {
   display: inline-flex;
   flex: 1 1 auto;
   gap: var(--neo-gap-xxs, 0.5rem);
   align-items: center;
-  padding: 0.125rem 0.5rem;
-  transition: color 0.15s ease;
+  padding: var(--neo-gap-5xs, 0.125rem) var(--neo-gap-xxs, 0.5rem);
+  transition: color 0.15s ease, gap 0.3s ease;
+}
+.neo-list-item-content :global(> .neo-list-item-media) {
+  --neo-media-margin: var(--neo-list-item-media-margin, var(--neo-gap-4xs));
+  --neo-media-padding:var(--neo-list-item-media-padding, var(--neo-gap-4xs));
+  --neo-media-flex: var(--neo-list-item-media-flex, 0 0 30%);
 }
 .neo-list-item-content.neo-disabled {
   color: var(--neo-text-color-disabled);
 }
 .neo-list-item-content.neo-button {
-  padding: 0.375rem 0.625rem;
+  padding: var(--neo-list-item-button-padding, 0.4375rem 0.625rem);
+}
+.neo-list-item-content.neo-button.neo-rounded {
+  padding: var(--neo-list-item-button-padding, 0.5rem 0.75rem);
+}
+.neo-list-item-content.neo-reverse {
+  justify-content: flex-end;
+  text-align: end;
+}
+.neo-list-item-content.neo-reverse .neo-list-item-tags {
+  justify-content: flex-end;
+  text-align: end;
 }
 .neo-list-item-content:hover:not(.neo-disabled, .neo-button) {
   color: var(--neo-text-color-highlight);
 }
-.neo-list-item-content :global(.neo-list-item-skeleton .neo-skeleton-text-line) {
-  --neo-skeleton-text-line-height: var(--neo-line-height-sm, 1.25rem);
-}
 .neo-list-item-content.neo-description {
   gap: var(--neo-gap-xs, 0.625rem);
 }
-.neo-list-item-content.neo-description :global(.neo-list-item-skeleton .neo-skeleton-text-line:nth-child(2n)) {
-  --neo-skeleton-text-font-size: var(--neo-font-size-sm, 0.875rem);
-  --neo-skeleton-text-line-height: var(--neo-line-height-sm, 1.25rem);
-}
 .neo-list-item-checkmark, .neo-list-item-arrow {
   aspect-ratio: 1/1;
 }
@@ -217,9 +372,6 @@
   --neo-arrow-offset-end: 40%;
   --neo-arrow-delay: 0s;
 }
-.neo-list-item-checkmark {
-  margin-inline-end: 0.4375rem;
-}
 .neo-list-item-before, .neo-list-item-after, .neo-list-item-arrow, .neo-list-item-checkmark {
   display: inline-flex;
   flex: 0 0 auto;
@@ -231,31 +383,9 @@
   border-radius: 50%;
   transition: background-color 0.3s ease-out;
 }
-.neo-list-item-before :global(> *), .neo-list-item-after :global(> *), .neo-list-item-arrow :global(> *), .neo-list-item-checkmark :global(> *) {
-  opacity: 1;
-  transition: opacity 0.15s ease-out 0.15s;
-}
-.neo-list-item-before.neo-skeleton, .neo-list-item-after.neo-skeleton, .neo-list-item-arrow.neo-skeleton, .neo-list-item-checkmark.neo-skeleton {
-  --neo-skeleton-start: 1;
-  --neo-skeleton-end: calc(1 + var(--neo-skeleton-step, -0.3));
-  color: var(--neo-skeleton-color);
-  background-color: var(--neo-skeleton-color);
-  background-clip: padding-box;
-  border-color: var(--neo-skeleton-color);
-  opacity: 1;
-  transition: background-color 1s ease, color 0.3333333333s ease, border-color 1s ease, opacity 1s ease;
-  animation: skeleton 3s var(--neo-transition-skeleton) infinite;
-  animation-delay: 1s;
-}
-@keyframes skeleton {
-  0%, 80%, 100% {
-    opacity: var(--neo-skeleton-start);
-  }
-  40% {
-    opacity: var(--neo-skeleton-end);
-  }
+.neo-list-item-checkmark:not(.neo-reverse) {
+  margin-inline-end: 0.4375rem;
 }
-.neo-list-item-before.neo-skeleton :global(> *), .neo-list-item-after.neo-skeleton :global(> *), .neo-list-item-arrow.neo-skeleton :global(> *), .neo-list-item-checkmark.neo-skeleton :global(> *) {
-  opacity: 0;
-  transition-delay: 0s;
+.neo-list-item-checkmark.neo-reverse {
+  margin-inline-start: 0.4375rem;
 }</style>

package/dist/list/NeoListBaseItem.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { NeoListBaseItemProps } from './neo-list-base-item.model.js';
-declare const NeoListBaseItem: import("svelte").Component<NeoListBaseItemProps, {}, "hovered" | "focused" | "touched">;
+declare const NeoListBaseItem: import("svelte").Component<NeoListBaseItemProps<unknown, any, "li", import("./neo-list.model.js").NeoBaseListItem<unknown, "li", any>>, {}, "hovered" | "focused" | "buttonRef" | "touched">;
 type NeoListBaseItem = ReturnType<typeof NeoListBaseItem>;
 export default NeoListBaseItem;

package/dist/list/NeoListBaseLoader.svelte

@@ -5,6 +5,7 @@
   import { circIn, circOut } from 'svelte/easing';
   import { fade } from 'svelte/transition';
 
+  import NeoMedia from '../media/NeoMedia.svelte';
   import NeoSkeletonText from '../skeletons/NeoSkeletonText.svelte';
   import { toTransition, toTransitionProps } from '../utils/action.utils.js';
   import { quickScaleDelayProps, quickScaleProps } from '../utils/transition.utils.js';
@@ -16,16 +17,19 @@
     after,
     checkmark = select,
     description,
+    header,
+    media,
 
     lines = description ? 2 : 1,
     items = 3,
-    flex = items > 1 ? undefined : '0 0 70%',
 
     in: inAction = { use: fade, props: quickScaleProps },
     out: outAction = { use: fade, props: quickScaleDelayProps },
 
     beforeProps,
     afterProps,
+    mediaProps,
+    headerProps,
     ...rest
   }: NeoListBaseLoaderProps = $props();
 
@@ -51,7 +55,16 @@
           </div>
         {/if}
 
-        <NeoSkeletonText flex={flex ?? `0 1 ${randomInt(40, 80)}%`} {lines} {...rest} class={['neo-list-loader-skeleton', rest?.class]} />
+        {#if media}
+          <NeoMedia class="neo-list-base-loader-media" elevation="1" loading {...mediaProps} />
+        {/if}
+
+        <div class="neo-list-base-loader-text">
+          {#if header}
+            <NeoSkeletonText width={`${randomInt(90, 100)}%`} lines={header} {...headerProps} class={['neo-list-loader-header-skeleton', headerProps?.class]} />
+          {/if}
+          <NeoSkeletonText width={`${randomInt(60, 90)}%`} {lines} {...rest} class={['neo-list-loader-skeleton', rest?.class]} />
+        </div>
 
         {#if after}
           {@const { width, height, ...aProps } = afterProps ?? {}}
@@ -75,6 +88,12 @@
   align-items: center;
   justify-content: space-between;
 }
+.neo-list-base-loader-text {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--neo-list-loader-text-gap, 0);
+}
 .neo-list-base-loader-content {
   display: inline-flex;
   flex: 1 1 auto;
@@ -82,13 +101,18 @@
   align-items: center;
   padding: 0.125rem 0.5rem;
 }
+.neo-list-base-loader-content :global(> .neo-list-base-loader-media) {
+  --neo-media-margin: var(--neo-list-loader-media-margin, var(--neo-gap-4xs));
+  --neo-media-padding:var(--neo-list-loader-media-padding, var(--neo-gap-4xs));
+  --neo-media-flex: var(--neo-list-loader-media-flex, 0 0 30%);
+}
 .neo-list-base-loader-content :global(.neo-list-loader-skeleton .neo-skeleton-text-line) {
   --neo-skeleton-text-line-height: var(--neo-line-height-sm, 1.25rem);
 }
 .neo-list-base-loader-content.neo-description {
   gap: var(--neo-gap-xs, 0.625rem);
 }
-.neo-list-base-loader-content.neo-description :global(.neo-list-loader-skeleton .neo-skeleton-text-line:nth-child(2n)) {
+.neo-list-base-loader-content.neo-description :global(.neo-list-loader-skeleton .neo-skeleton-text-line:nth-child(n + 2)) {
   --neo-skeleton-text-font-size: var(--neo-font-size-sm, 0.875rem);
   --neo-skeleton-text-line-height: var(--neo-line-height-sm, 1.25rem);
 }
@@ -104,7 +128,7 @@
   background-clip: padding-box;
   border-color: var(--neo-skeleton-color);
   opacity: 1;
-  transition: background-color 1s ease, color 0.3333333333s ease, border-color 1s ease, opacity 1s ease;
+  transition: border-radius 0.3333333333s ease, background-color 1s ease, color 0.3333333333s ease, border-color 1s ease, opacity 1s ease;
   animation: skeleton 3s var(--neo-transition-skeleton) infinite;
   animation-delay: 1s;
 }

package/dist/list/NeoListBaseSection.svelte

@@ -3,7 +3,6 @@
 
   import { getUUID } from '@dvcol/common-utils/common/string';
 
-  import NeoSkeletonText from '../skeletons/NeoSkeletonText.svelte';
   import NeoMark from '../text/NeoMark.svelte';
 
   const {
@@ -16,11 +15,11 @@
     context,
 
     select,
-    skeleton,
     highlight,
+    reverse,
+    flip,
 
     // Other props
-    skeletonProps,
     ...rest
   }: NeoListBaseSectionProps = $props();
 
@@ -31,17 +30,8 @@
   {@render section?.render(list, { items: section.items, section, index, context })}
 {:else}
   {#if section.label}
-    <div id={labelId} class="neo-list-section-title" class:neo-sticky={section.sticky}>
-      <NeoSkeletonText
-        loading={!!skeleton}
-        disabled={skeleton === undefined}
-        lines={1}
-        align="center"
-        {...skeletonProps}
-        class={['neo-list-section-skeleton', skeletonProps?.class]}
-      >
-        <NeoMark value={section.label} filter={highlight} />
-      </NeoSkeletonText>
+    <div id={labelId} class="neo-list-section-title" class:neo-sticky={section.sticky} class:neo-reverse={reverse}>
+      <NeoMark class="neo-list-section-title-mark" value={section.label} filter={highlight} />
     </div>
   {/if}
   <svelte:element
@@ -49,6 +39,7 @@
     role={select ? 'listbox' : 'list'}
     aria-labelledby={labelId}
     class:neo-list-section-list={true}
+    class:neo-flip={flip}
     {...rest}
     {...section.sectionProps}
   >
@@ -56,12 +47,24 @@
   </svelte:element>
 {/if}
 
-<style>.neo-list-section-title {
+<style>.neo-list-section-list {
+  display: flex;
+  flex-direction: column;
+}
+.neo-list-section-list.neo-flip {
+  flex-direction: column-reverse;
+  justify-content: end;
+}
+.neo-list-section-title {
   display: inline-flex;
   padding: 0.25rem 0.6125rem;
   transition: color 0.3s ease;
   margin-block-end: 0.125rem;
 }
+.neo-list-section-title.neo-reverse {
+  justify-content: flex-end;
+  text-align: end;
+}
 .neo-list-section-title.neo-sticky {
   position: sticky;
   top: -0.75rem;