List

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ListGlance(Component):
    template = """
      <c-CList label="Recent observations" variant="surface" c-divided="True">
        <c-CListItem href="/observations/aurora" c-current="True">Aurora over Tromsø</c-CListItem>
        <c-CListItem href="/observations/comet">Comet C/2026 Q2</c-CListItem>
        <c-CListItem href="/observations/eclipse">Lunar eclipse</c-CListItem>
      </c-CList>
    """


preview = ListGlance()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ListContent(Component):
    template = """
      <c-CList c-ordered="True" marker="decimal" c-start="3">
        <c-CListItem>Align the telescope</c-CListItem>
        <c-CListItem>Calibrate the camera</c-CListItem>
        <c-CListItem>Begin the exposure</c-CListItem>
      </c-CList>
    """


preview = ListContent()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ListNavigation(Component):
    template = """
      <nav aria-label="Observatory">
        <c-CList variant="surface">
          <c-CListItem href="/sky" c-current="True">Sky map</c-CListItem>
          <c-CListItem href="/sessions">Sessions</c-CListItem>
          <c-CListItem href="/equipment">Equipment</c-CListItem>
        </c-CList>
      </nav>
    """


preview = ListNavigation()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ListAnatomy(Component):
    template = """
      <c-CList label="Specimens" c-divided="True">
        <c-CListItem>
          <c-fill name="start"><c-CAvatar alt="Mare Imbrium" /></c-fill>
          <c-fill name="default">Mare Imbrium basalt</c-fill>
          <c-fill name="description">Apollo 15 · sample 15555</c-fill>
          <c-fill name="end"><c-CBadge variant="outline">Lunar</c-CBadge></c-fill>
        </c-CListItem>
        <c-CListItem>
          <c-fill name="start"><c-CIcon name="star" /></c-fill>
          <c-fill name="default">Murchison meteorite</c-fill>
          <c-fill name="description">Carbonaceous chondrite · 1969</c-fill>
          <c-fill name="end">12.4 g</c-fill>
        </c-CListItem>
      </c-CList>
    """


preview = ListAnatomy()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ListActions(Component):
    template = """
      <c-CList label="Observation queue" variant="surface">
        <c-CListItem c-action="True" @click="console.log('opened')">Open current session</c-CListItem>
        <c-CListItem>
          <c-fill name="default">Nightly calibration</c-fill>
          <c-fill name="description">Ready to archive</c-fill>
          <c-fill name="end"><c-CButton size="sm" variant="outline">Archive</c-CButton></c-fill>
        </c-CListItem>
      </c-CList>
    """


preview = ListActions()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class NestedList(Component):
    template = """
      <c-CList label="Solar system" marker="disc">
        <c-CListItem>
          <c-fill name="default">
            Inner planets
            <c-CList marker="disc">
              <c-CListItem>Mercury</c-CListItem>
              <c-CListItem>Venus</c-CListItem>
              <c-CListItem>Earth</c-CListItem>
            </c-CList>
          </c-fill>
        </c-CListItem>
        <c-CListItem>Outer planets</c-CListItem>
      </c-CList>
    """


preview = NestedList()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ListPresentation(Component):
    template = """
      <c-CStack gap="lg">
        <c-CList label="Comfortable list" variant="surface">
          <c-CListItem>Andromeda Galaxy</c-CListItem>
          <c-CListItem>Triangulum Galaxy</c-CListItem>
        </c-CList>
        <c-CList label="Compact divided list" density="compact" c-divided="True">
          <c-CListItem>Whirlpool Galaxy</c-CListItem>
          <c-CListItem>Sombrero Galaxy</c-CListItem>
        </c-CList>
      </c-CStack>
    """


preview = ListPresentation()
preview  # noqa: B018

import citry_ui
from citry import Component, citry

citry.register_library(citry_ui)


class ListCustomization(Component):
    template = """
      <c-CList class_="violet-list" label="Nebula catalog" variant="surface">
        <c-CListItem href="/nebula/orion" c-current="True">Orion Nebula</c-CListItem>
        <c-CListItem href="/nebula/lagoon">Lagoon Nebula</c-CListItem>
      </c-CList>
    """
    css = """
      :where(.violet-list) {
        --cui-list-current-background: light-dark(#ede9fe, #4c1d95);
        --cui-list-radius: 1rem;
      }
    """


preview = ListCustomization()
preview  # noqa: B018