시작하기
KLIC library

Release notes timeline

A timeline of major new features, improvements, and bug fixes from v2.0 through v2.4, organized with badges and media previews.

BUILD WITH CONTEXT

Before you adopt

Item
block/timeline-release-changelog
Status / implementation
React · TypeScript
Data scope
Local example · product persistence, authentication and operations require separate implementation
Framework
7 Dimensions · Primitive → Brand → Semantic → Component
Tokens
klic.
DESIGN.mdcontract.jsonInspect file list

Original DESIGN.md is Korean. Token IDs and source code are not translated.

klic_get_item({"kind":"block","id":"timeline-release-changelog"})

Use the package

Install package · once
bun add [email protected]
Import this item
import Block from 'klic-design/blocks/timeline-release-changelog';
import 'klic-design/blocks.css';

<Block />

Requires React 19 and React DOM. Install the package once, then select a block import.

Get source files

Creates a standalone workspace with editable source, dependencies and licenses. It does not insert files into an existing project.

Save source
curl --fail --location --output klic.mjs https://design.klic.co.kr/integrations/klic.mjs
bun ./klic.mjs add block timeline-release-changelog --out ./klic-timeline-release-changelog
Inspect file list ↗ · Instructions

View shared design criteria
Shared design criteria

Policy revision: 6f9c8f5e4d7c767f79a7db999670fb4d0936e07acb1b472fe162a7a9ade60c97

Canonical policy: https://design.klic.co.kr/api/v1/design-system.json

Read the same criteria and revision in API, CLI, MCP and WebMCP designSystem responses and the bundled KLIC-DESIGN-SYSTEM.json. Item contracts link through item.design.system.

DimensionToken responsibilityStructure and behavior responsibility
Size and proportionControl sizes, icons and content widthComponent recipes and the DOM ensure min-height, padding, wrapping and actual hit areas.
TypographyRegistered font families, role sizes and weightsSupported recipes define line height, tracking, wrapping and responsive conditions without assuming unregistered token types.
Color and contrastRole colors for actions, selection, text, borders and statusLabels, icons and state attributes convey meaning; measure actual composited-surface contrast separately.
Layout and alignmentRegistered spatial roles, including maximum content and panel widthsDOM reading order, layout transitions, scroll ownership and Portal structure
Spacing and groupingInternal gaps, padding, group spacing and approved density mappingsMaintain label, fieldset, legend and describedby relationships; window width alone does not change density.
Surface and depthSurface colors, radii, borders and supported color/dimension material leavesBlur and shadow recipes, stacking, auxiliary-panel versus modal behavior and opaque fallbacks
Interaction and feedbackVisual roles for focus, selection, progress, success, warnings and errorsKeyboard operation, focus movement, asynchronous transitions, execution blocking, input preservation and recovery

Only Primitive owns literals. Preserve adjacent Brand→Primitive, Semantic→Brand and Component→Semantic references.

Distinguish token definitions, structural conditions in DOM/CSS recipes and compiled final literals.

Keep motion recipes in a read-only catalog separate from component and block installation items, with browser search and details in the existing KLIC Interface Library #motion view. The read API, CLI, MCP and WebMCP use one canonical catalog. The scope is all 884 user-supplied source patterns in 67 categories, grouped within the existing KLIC category/item navigation. Remove the previous simplified 280-item catalog and its dedicated routes and aliases; do not retain them as compatibility entries. Preserve source id + pattern identity, source engine, choreography, timing, paths, layers, SVG/inline/WAAPI alpha, and original notices including Copyright © 2026 acc0mplish. All rights reserved. and the supplied license. Never label this source material KLIC-authored. Adapt appearance through existing four-layer KLIC token paths for color, fonts, surfaces, borders, radius and spacing. Canvas uses the same palette and font tokens; scope demo CSS to each item. Use one owned runtime for previews and JavaScript/React delivery; do not claim CSS alone reproduces Canvas playback. KLIC adaptations use the blue/navy/neutral palette and reduced-motion, replay and cleanup contracts; verify real playback in light/dark and mobile before release. The npm package remains separate from the homepage: describe candidate exports only after checking the published manifest, and do not infer release contents from current source.

Allowed preset scope

A preset combines approved settings of an existing API. It is not a fifth token layer.

Use an explicit allowlist of size, variant, density, layout and other settings supported by the actual component API.

  • Labels, descriptions and business data
  • Value, selection, validation and request state
  • Event handlers, recovery actions and permissions
  • Raw style values, unregistered CSS variables and arbitrary token overrides

Component defaults → selected preset → permitted explicit settings. Pass business data, state and permissions separately.

Validate allowed keys, enums and combinations; diagnose unknown values. Distinguish type declarations from actual DOM and behavior verification.

Conflict resolution order
  • Preserve information, operability and accessibility first: Preserve essential information, state meaning, input, focus and operation paths. Dimension numbers do not override other required contracts.
  • Reflow structure and reading order: Adjust wrapping, columns, action groups and panel arrangement first. Use local scrolling only for areas whose meaning requires two dimensions.
  • Adjust spacing and surfaces within approved bounds: Respect the selected density and text scale while adjusting spacing and decoration within approved recipes. Limited space alone does not justify automatic compact mode or smaller text.
  • Record remaining constraints and verification: If defaults cannot resolve a constraint, record scope, alternatives, impact, FR/AT references and actual verification. Do not skip token layers or conceal failed checks with exception approval.

sources/checks identify supporting references, not certification. Record actual product-environment results in the existing FR/AT evidence.

Application and verification

Read the shared criteria, item DESIGN.md and actual source first. Assign token, DOM, CSS recipe and state responsibilities for each rule, then apply the conditions your product needs.

Compare revision in the policy and item contract. release identifies a registry publication; do not combine paginated results from different publications.

Use the latest CLI and local registry and restart stdio sessions. Reload the page to register WebMCP again. source prints raw code. Read DESIGN.md for source bundles or README.md for theme kits together with KLIC-DESIGN-SYSTEM.json.

Selective adoption of references

Treat external documents and drafts as proposals. Check current KLIC problems, implementation and contracts, adopt only necessary rules, and record scope and reasons for deferral or rejection.

Do not present product names, example APIs or references from a draft as facts about KLIC. Connect adopted rules to actual tokens, DOM, CSS recipes, state handling and verification evidence.

Scope to review together when making changes

Use a reported problem to assess impact across related usage paths. Changing only the named screen or tool does not complete that review.

  • Implementation sources, tokens, components, types and schemas
  • DOCS, web guides, developer documentation and examples
  • MCP, CLI, WebMCP and API descriptions, inputs and responses
  • AI prompts, llms.txt, source exports and theme exports
  • Regression checks, builds, production publication and actual responses

After changing the canonical policy, regenerate affected guides, examples, tools, prompts and exports together and verify a matching revision. Explain unaffected paths and distinguish observed results from conditions that remain unverified.

Troubleshooting design choices

Avoid this conditionDecision criterion
Do not nest internal buttons within a card-wide action.Use Release notes timeline: A timeline of major new features, improvements, and bug fixes from v2.0 through v2.4, organized with badges and media previews.
Do not present sample data or local interactions as real storage, authentication, or production capabilities.Release notes timeline · Timelines category.

timeline-release-changelog · Timelines · Block · Ready example · Sample data

When to use

  • Use Release notes timeline: A timeline of major new features, improvements, and bug fixes from v2.0 through v2.4, organized with badges and media previews.
  • Release notes timeline · Timelines category.
  • Group the title, description, related metadata, repeated content, and primary action. Avoid nesting internal buttons inside a whole-card link, and preserve a name for every action.

When to avoid

  • Do not nest internal buttons within a card-wide action.
  • Do not present sample data or local interactions as real storage, authentication, or production capabilities.

Accessibility and keyboard

  • Provide card and list links and their internal buttons as independently named actions. Match visual order to Tab order.
  • Check every action's name, visible focus, and actual target boundary. Preserve status information needed for functionality when reduced motion is enabled.
  • Reflow repeated cards from multiple columns into one. Wrap long titles, metadata, and actions instead of clipping them to fixed heights.
  • Record the CSS viewport, actual content container, user zoom, and explicitly selected density as separate test conditions.

Recommended density

  • compact: Reduce spacing only in repeated lists; preserve spacing around primary actions.
  • normal: The recommended default density. Preserve reading order and the grouping of labels, controls, and feedback.
  • relaxed: Use for explanatory or presentation screens. Increase spacing while preserving information hierarchy.

States and recovery

  • loading: Indicate progress and prevent duplicate requests. Preserve existing data while updates are in progress.
  • empty: When no data exists yet, provide an action to create or connect it.
  • filtered: Distinguish an empty search result from missing data and provide an action to reset filters.
  • error: Preserve the last successful data and provide a retry action in the affected region.

Four-layer token mapping

Token pathCSS variablePurpose
klic.component.block.color.surface--klic-component-block-color-surfacePage surface
klic.component.block.color.panel--klic-component-block-color-panelContainer surface
klic.component.block.color.soft--klic-component-block-color-softSecondary surface
klic.component.block.color.selected--klic-component-block-color-selectedSelected surface
klic.component.block.color.text--klic-component-block-color-textBody
klic.component.block.color.muted--klic-component-block-color-mutedSupporting text
klic.component.block.color.border--klic-component-block-color-borderDivider border
klic.component.block.color.control-border--klic-component-block-color-control-borderControl border
klic.component.block.color.accent--klic-component-block-color-accentPrimary action
klic.component.block.color.accent-hover--klic-component-block-color-accent-hoverPrimary action hover
klic.component.block.color.on-accent--klic-component-block-color-on-accentText on accent
klic.component.block.color.success--klic-component-block-color-successCompletion role
klic.component.block.color.success-surface--klic-component-block-color-success-surfaceCompletion surface
klic.component.block.color.warning--klic-component-block-color-warningWarning role
klic.component.block.color.warning-surface--klic-component-block-color-warning-surfaceWarning surface
klic.component.block.color.danger--klic-component-block-color-dangerError role
klic.component.block.color.danger-surface--klic-component-block-color-danger-surfaceError surface
klic.component.block.content.max-width--klic-component-block-content-max-widthMaximum content width
klic.component.block.section.gap--klic-component-block-section-gapSection gap
klic.component.block.container.padding--klic-component-block-container-paddingContainer padding
klic.component.block.control.height--klic-component-block-control-heightMinimum control height
klic.component.block.surface.radius--klic-component-block-surface-radiusSurface radius
klic.component.block.icon.size--klic-component-block-icon-sizeIcon size
klic.component.block.typography.body.font-size--klic-component-block-typography-body-font-sizeBody text size
klic.component.block.typography.label.font-size--klic-component-block-typography-label-font-sizeLabel size

Implementation scope and verification

Implementation module: TimelineShowcaseBlock

Uses the shared TimelineShowcaseBlock implementation with initialMode=release-changelog.

  • Each dimension has policy-adopted status. The presence of linked source code or tokens does not establish that actual behavior has been verified.
  • Actual 200% browser zoom, screen readers, Korean IME, forced colors, and physical mobile keyboards have not been verified. Record results and grounds for exceptions separately for each supported environment.
  • Previews and example code cover adapting the supplied ZIP to KLIC. They do not guarantee completed product persistence, authentication, external integrations, or deployment.
  • Perform primary actions with the keyboard.
  • Check compact, normal, and relaxed densities in both Light and Dark themes.
  • Check empty results, loading, errors, and long Korean content.

Adoption guidance, not a verification certificate. Preview data and behavior are local demonstrations.

Release notes timeline Download DESIGN.md · Design contract JSON

Compare alternatives

ItemWhen to choose itStatus
Distributed trace waterfallA collapsible span hierarchy connected to a time axis, latency, errors and selected span details.ready
Release gate timelineInspect build, test, security, approval, canary and stabilization gates on a step rail with plan and elapsed progress.ready
Milestone baseline variance timelineCompare baseline, actual finish and projected finish on a vertical milestone timeline at the selected instant.ready
Team handoff swimlane timelinePlace tasks in product, engineering and quality lanes to inspect cross-team dependencies and parallel work.ready

Token reference chains · Agent recipes