================================================================================
  KISEKI THEME — COMPONENT & RECIPE REPORT
  Generated: May 2026
================================================================================


COMPONENTS
================================================================================
Single Directory Components (SDC) live under:
  web/themes/custom/kiseki_theme/components/{atoms,molecules,organisms}/

Each component directory contains:
  <name>.component.yml   — metadata, props, slots, examples
  <name>.twig            — Twig template
  <name>.scss / .css     — styles (SCSS compiled to CSS via npm run build)
  <name>.js              — optional behaviour (Drupal behaviours / once())

--------------------------------------------------------------------------------
ATOMS  —  Single-purpose UI primitives
--------------------------------------------------------------------------------

  Component        Directory          Description
  ---------------  -----------------  ------------------------------------------
  Badge            atoms/badge        Small inline indicator for counts, statuses,
                                      or short labels. Supports primary, secondary,
                                      success, warning, and danger variants.

  Button           atoms/button       Reusable CTA button. Renders as <button> or
                                      <a> depending on whether a URL is provided.
                                      Supports primary, secondary, tertiary variants.

  Divider          atoms/divider      Visual <hr> separator between content sections.
                                      Configurable spacing (sm/md/lg) and line style
                                      (solid/dashed/dotted).

  Heading          atoms/heading      Semantic heading element h1-h6. Level chosen
                                      based on document outline, not visual size.
                                      Accepts optional CSS class modifier.

  Icon             atoms/icon         Inline SVG icon atom. Accepts pre-rendered SVG
                                      markup or Drupal media output. Handles
                                      aria-hidden for decorative and aria-label for
                                      informative icons. Sizes: sm/md/lg/xl.

  Link             atoms/link         Accessible inline link with auto-detection of
                                      external URLs. External links get target=_blank
                                      and a visually hidden "(opens in a new tab)"
                                      notice automatically.

  Tag              atoms/tag          Compact category label. Renders as plain text,
                                      a link, or a <span> depending on props. Used
                                      for taxonomy terms and content classification.

--------------------------------------------------------------------------------
MOLECULES  —  Composed groups of atoms
--------------------------------------------------------------------------------

  Component        Directory          Description
  ---------------  -----------------  ------------------------------------------
  Accordion Item   accordion_item     Collapsible panel with a clickable heading
                                      trigger. Expands/collapses body content.
                                      Uses <details>/<summary> for native semantics.
                                      Child of the Accordion organism.

  Alert            alert              Contextual notice for info, success, warning,
                                      or error states. Optional dismiss button using
                                      Drupal once(). Maps aria-role alert/status.

  Card             card               Article teaser card with optional image, linked
                                      title, and truncated description. Full-card
                                      click area via CSS stretched-link. Maps to the
                                      Article content type teaser view mode.

  File Download    file_download      Downloadable asset link showing file name, type,
                                      and size alongside a prominent download CTA.
                                      Renders as <a download> with accessible label.

  Navigation Card  navigation_card    Linked section/topic card with optional image
                                      or icon, descriptive body, and CTA link. Used
                                      as a child of the Nav Cards Grid organism.

  Quote            quote              Accessible blockquote pairing a pull quote with
                                      optional citation and source URL. Rendered as
                                      <figure>/<blockquote>/<figcaption>. Variants:
                                      default, highlight, centered.

  Stats Item       stats_item         Individual KPI block with a large numeric value,
                                      short descriptive label, and optional icon.
                                      Child of the Stats organism.

  Text Block       text_block         Rich-text WYSIWYG content wrapper. Accepts
                                      rendered HTML from a body field. Optional
                                      max-width constraint (narrow/wide). Maps to
                                      the kiseki_theme_text paragraph type.

  Timeline Item    timeline_item      Single entry in a vertical timeline: date marker,
                                      title, and supporting body text. Renders as <li>
                                      inside the Timeline organism's <ol>.

--------------------------------------------------------------------------------
ORGANISMS  —  Full page sections
--------------------------------------------------------------------------------

  Component        Directory          Description
  ---------------  -----------------  ------------------------------------------
  Accordion        accordion          Grouped collapsible accordion items with an
                                      optional section heading. Renders an <section>
                                      wrapping an <ul> of Accordion Item molecules.

  Banner           banner             Full-width hero section with heading, body text,
                                      optional background image, and up to two CTA
                                      links. Supports an inverted dark-background
                                      variant.

  Card Listing     card_listing       Section with optional heading and up to 3 Card
                                      molecule slots in a responsive CSS Grid row.
                                      Grid adjusts automatically for 1-3 items.

  Layout Columns   layout_columns     Structural wrapper for Layout Paragraphs layouts.
                                      Provides the column scaffold for multi-column
                                      paragraph arrangements.

  Media + Legend   media_legend       Accessible <figure> pairing a media item (image
                                      or video) with an optional visible caption and
                                      accessible description.

  Nav Cards Grid   nav_cards_grid     Responsive grid of Navigation Card molecules with
                                      an optional section heading. Column count
                                      configurable: 2, 3, or 4 columns.

  Next Step        next_step          Promotional section guiding users to a next
                                      action. Heading, supporting text, and CTA link.
                                      Suitable for end-of-page conversion sections.

  Slider           slider             Full-width carousel cycling through slide items.
                                      Each slide can contain heading, text, image,
                                      and links. Built on Slick carousel.

  Stats            stats              Key metrics section with optional heading above
                                      a responsive grid of Stats Item molecules.
                                      Background colour variants: white, light, dark.

  Text + Image     text_image         Split two-column section with image and text.
                                      Image position (left/right) is configurable.
                                      On narrow viewports stacks to single column.

  Timeline         timeline           Vertical chronological list of milestones or
                                      roadmap entries. Renders an <ol> of Timeline
                                      Item molecules with an optional section heading.

  Webform Section  webform_section    Content section embedding a Drupal Webform
                                      entity. Includes optional heading and body text
                                      above the embedded form. Background: white/light.


RECIPES
================================================================================
Recipes live under:  recipes/
Apply with:          ddev drush recipe path/to/recipe

Each recipe directory contains:
  recipe.yml         — name, description, modules, config actions
  config/            — symlinks to configs/sync/ YAML files managed by the recipe

--------------------------------------------------------------------------------

  Recipe                 Directory              Description
  ---------------------  ---------------------  --------------------------------
  Config Split Setup     config_split_setup     Installs Config Split and creates
                                                the three environment split entities:
                                                dev, staging, and prod. Activation
                                                is driven by the DEPLOY_NAME env var.

  Kiseki Theme Setup     kiseki_theme_setup     Installs the Kiseki NTT DATA
                                                SDC-based front-end theme and all
                                                supporting modules. Imports all
                                                paragraph types, field storages,
                                                entity displays, responsive image
                                                styles, and block placements.

  Pathauto Setup         pathauto_setup         Installs and configures Pathauto
                                                with automatic URL alias patterns
                                                for content types (nodes, taxonomy).

  SDC Styleguide Setup   sdc_styleguide_setup   Installs the SDC Styleguide and
                                                supporting display modules. Applies
                                                project-specific component explorer
                                                settings for the Kiseki theme.

  Search Setup           search_setup           Installs and configures site-wide
                                                full-text search via Search API with
                                                a Database backend and Facets for
                                                sidebar filtering on /search.

  Security Setup         security_setup         Installs and configures core security
                                                hardening: SecKit (CSP/HSTS), Login
                                                Security (brute-force lockout),
                                                Autologout, Paranoia, Flood Control,
                                                and Password Policy.

  Webform Setup          webform_setup          Installs and configures the Webform
                                                module with spam protection via
                                                Honeypot. Sets up the default text
                                                format and base webform config.


BUILD
================================================================================
  Compile SCSS to CSS:
    cd web/themes/custom/kiseki_theme
    npm run build

  Import config after YAML changes:
    ddev drush cim -y

  Materialise paragraph icons (after new types added):
    ddev drush updb -y

  Clear cache:
    ddev drush cr

================================================================================
