diff --git a/assets/css/components/date-picker.scss b/assets/css/components/date-picker.scss
index 6e8d848..6f0361a 100644
--- a/assets/css/components/date-picker.scss
+++ b/assets/css/components/date-picker.scss
@@ -65,7 +65,6 @@
     // 觸控裝置（pointer: coarse）：永遠顯示原生 input
     &--native {
       // 預設顯示（無 JS 或觸控裝置）
-
       // 桌面 JS 增強後，JS 會在 .dp 加上 data-js-enhanced 屬性，
       // 並隱藏 native input
       .dp[data-js-enhanced] & {
diff --git a/assets/css/components/file-upload.scss b/assets/css/components/file-upload.scss
new file mode 100644
index 0000000..dfbd6e7
--- /dev/null
+++ b/assets/css/components/file-upload.scss
@@ -0,0 +1,165 @@
+.file-upload {
+  position: relative;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  margin-top: 0.5em;
+  border: 2px dashed var(--borderColor);
+  border-radius: 0.45rem;
+  background-color: var(--backgroundColorLayer1, var(--backgroundColor));
+  transition: background-color 0.15s, border-color 0.15s;
+
+  // The native file input fills the entire drop zone so it can:
+  //  - receive clicks (open OS file dialog)
+  //  - receive drag & drop events natively, no JS required
+  //  - be announced by assistive technology with the associated <label>
+  &__input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    cursor: pointer;
+    // Ensure the input itself is the topmost interactive element
+    z-index: 1;
+    // The native input fills the whole drop zone, so its default focus ring
+    // would be drawn around the entire area and overlap/misalign with the
+    // outline drawn on &__button via :focus-within. Hide it here; the visible
+    // focus indicator is provided on the button instead.
+    outline: none;
+  }
+
+  &__input:disabled {
+    cursor: not-allowed;
+  }
+
+  // Decorative content shown beneath the transparent input.
+  // aria-hidden in the markup so screen readers don't read it twice;
+  // the <label for> + <input> already provides the accessible name.
+  &__dropzone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5em;
+    min-height: 8rem;
+    padding: 1.5em 1em;
+    text-align: center;
+    pointer-events: none;
+  }
+
+  &__button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 2.5rem;
+    padding: 0.4em 1.25em;
+    border: 1px solid var(--linkColor, var(--textColor));
+    border-radius: 0.3rem;
+    background-color: var(--backgroundColor);
+    color: var(--linkColor, var(--textColor));
+    font-weight: 700;
+  }
+
+  &__instruction {
+    color: var(--mutedTextColor, var(--textColor));
+    font-size: 0.95em;
+  }
+
+  // Hover / drag-over feedback. :hover triggers when the input (which fills
+  // the area) is hovered. We can't detect drag-over without JS, but :focus-within
+  // and :hover give clear interactive feedback.
+  &:hover,
+  &:focus-within {
+    border-color: var(--linkColor, var(--textColor));
+    background-color: var(--hoverOverlay, var(--backgroundColorLayer1));
+  }
+
+  &:focus-within &__button {
+    outline: 2px solid var(--textColor);
+    outline-offset: 2px;
+  }
+
+  // Error state mirrors form's .fieldset-has-error styling
+  &--error {
+    border-color: var(--errorColor, #c00);
+    border-style: solid;
+  }
+
+  // Once a file is chosen, dim the dashed border (still keep visible)
+  &--has-files {
+    border-style: solid;
+  }
+
+  // File list (used after files have been chosen, requires JS to populate
+  // dynamically; the partial example shows the static markup)
+  &__file-list {
+    margin: 0.75em 0 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &__file {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    padding: 0.4em 0.6em;
+    border: 1px solid var(--borderColor);
+    border-radius: 0.3rem;
+    background-color: var(--backgroundColor);
+
+    & + & {
+      margin-top: 0.4em;
+    }
+  }
+
+  &__file-icon {
+    flex: 0 0 auto;
+    font-size: 1.2em;
+  }
+
+  &__file-name {
+    flex: 1 1 auto;
+    word-break: break-all;
+    font-weight: 600;
+  }
+
+  &__file-size {
+    flex: 0 0 auto;
+    color: var(--mutedTextColor, var(--textColor));
+    font-size: 0.9em;
+  }
+
+  &__file-remove {
+    flex: 0 0 auto;
+    min-height: 2.25rem;
+    min-width: 2.25rem;
+    padding: 0.3em 0.75em;
+    border: 1px solid var(--borderColor);
+    border-radius: 0.3rem;
+    background-color: var(--backgroundColor);
+    color: var(--linkColor, var(--textColor));
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--hoverOverlay, var(--backgroundColorLayer1));
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--textColor);
+      outline-offset: 2px;
+    }
+  }
+}
+
+// Visually-hidden error prefix style reused locally
+.field-error {
+  margin: 0.25em 0;
+  color: var(--errorColor, #c00);
+
+  &__prefix {
+    font-weight: 700;
+  }
+}
diff --git a/assets/css/components/pagination.scss b/assets/css/components/pagination.scss
new file mode 100644
index 0000000..bb9a857
--- /dev/null
+++ b/assets/css/components/pagination.scss
@@ -0,0 +1,104 @@
+.pagination {
+  padding: 0.5em 0;
+
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.25em;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2.5rem;
+    min-height: 2.5rem;
+  }
+
+  &__item--overflow {
+    color: var(--mutedTextColor, var(--textColor));
+    padding: 0 0.25em;
+    user-select: none;
+  }
+
+  &__link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.4em;
+    min-width: 2.5rem;
+    min-height: 2.5rem;
+    padding: 0.4em 0.75em;
+    border: 1px solid transparent;
+    border-radius: 0.3rem;
+    color: var(--linkColor, var(--textColor));
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+    background: transparent;
+    box-sizing: border-box;
+
+    &:hover {
+      background-color: var(--hoverOverlay, var(--backgroundColorLayer1));
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--textColor);
+      outline-offset: 2px;
+    }
+
+    &[aria-current="page"] {
+      color: var(--textColor);
+      font-weight: 700;
+      text-decoration: none;
+      border-color: var(--textColor);
+      background-color: var(--backgroundColorLayer1);
+    }
+  }
+
+  &__link--prev,
+  &__link--next {
+    text-decoration: underline;
+  }
+
+  // Chevron rendered with CSS (similar to breadcrumb arrow-separator)
+  // Size of chevron (excluding border)
+  $chevron-size: 0.4375em;
+  $chevron-border-width: 1px;
+
+  &__chevron {
+    display: inline-block;
+    width: $chevron-size;
+    height: $chevron-size;
+    border: solid;
+    border-color: currentcolor;
+    border-width: $chevron-border-width $chevron-border-width 0 0;
+  }
+
+  &__chevron--prev {
+    transform: translateX(25%) rotate(-135deg);
+  }
+
+  &__chevron--next {
+    transform: translateX(-25%) rotate(45deg);
+  }
+
+  // On narrow screens, hide the prev/next text labels but keep arrows
+  @media (max-width: 30em) {
+    &__link--prev span:last-child,
+    &__link--next span:first-child {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+  }
+}
diff --git a/assets/css/components/progress-stepper.scss b/assets/css/components/progress-stepper.scss
new file mode 100644
index 0000000..099b474
--- /dev/null
+++ b/assets/css/components/progress-stepper.scss
@@ -0,0 +1,196 @@
+.progress-stepper {
+  $segment-height: 0.5rem;
+  $counter-size: 2rem;
+  $bar-label-gap: 0.75rem; // >= 8px space between segment bar and label text
+  $color-complete: var(--linkColor, var(--textColor));
+  $color-current: var(--textColor);
+  $color-pending: var(--borderColor);
+  $color-pending-text: var(--mutedTextColor, var(--textColor));
+
+  display: block;
+  margin: 1em 0;
+
+  // Visually hidden, accessible to screen readers
+  &__status-text {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  &__segments {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: flex-start;
+    gap: 0.25rem;
+    margin: 0 0 1em;
+    padding: 0;
+    list-style: none;
+    counter-reset: step;
+  }
+
+  &__segment {
+    flex: 1 1 0;
+    min-width: 0;
+    position: relative;
+    padding-top: calc(#{$segment-height} + #{$bar-label-gap});
+    color: $color-pending-text;
+    font-size: 0.875rem;
+    word-break: break-word;
+
+    // The segment bar itself
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: $segment-height;
+      background-color: $color-pending;
+      border-radius: 2px;
+    }
+
+    &--complete {
+      color: $color-complete;
+
+      &::before {
+        background-color: $color-complete;
+      }
+    }
+
+    &--current {
+      color: $color-current;
+      font-weight: 700;
+
+      &::before {
+        background-color: $color-current;
+      }
+    }
+  }
+
+  &__label {
+    display: block;
+  }
+
+  // Counter variant
+  &--counters &__segments {
+    gap: 0.5rem;
+    align-items: flex-start;
+  }
+
+  &--counters &__segment {
+    padding-top: calc(#{$counter-size} + #{$bar-label-gap});
+
+    &::before {
+      top: calc((#{$counter-size} - #{$segment-height}) / 2);
+      height: $segment-height;
+      // leave space for the counter circle on the left
+      left: calc(#{$counter-size} / 2);
+    }
+
+    // Counter circle
+    .progress-stepper__counter {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: $counter-size;
+      height: $counter-size;
+      border: 2px solid $color-pending;
+      border-radius: 50%;
+      background-color: var(--backgroundColor);
+      color: $color-pending-text;
+      font-weight: 700;
+      line-height: 1;
+    }
+
+    &--complete .progress-stepper__counter {
+      border-color: $color-complete;
+      background-color: $color-complete;
+      color: var(--backgroundColor);
+    }
+
+    &--current .progress-stepper__counter {
+      border-color: $color-current;
+      background-color: $color-current;
+      color: var(--backgroundColor);
+    }
+  }
+
+  // No-labels variant: render just the segment bars
+  &--no-labels &__segment {
+    padding-top: 0;
+    height: $segment-height;
+
+    &::before {
+      position: static;
+      display: block;
+      height: 100%;
+    }
+  }
+
+  // Heading below the segments
+  &__heading {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25em;
+
+    h4 {
+      margin: 0;
+      font-size: 1.25rem;
+      color: var(--textColor);
+    }
+  }
+
+  &__heading-counter {
+    color: $color-pending-text;
+    font-size: 0.875rem;
+  }
+
+  &__current-step {
+    font-weight: 700;
+    color: var(--textColor);
+  }
+
+  // Mobile: collapse into a single bar showing only current / total
+  @media (max-width: 30em) {
+    &__segments {
+      gap: 0.125rem;
+    }
+
+    &__segment {
+      padding-top: $segment-height;
+    }
+
+    &__label,
+    &--counters &__counter {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    &--counters &__segment {
+      padding-top: $segment-height;
+
+      &::before {
+        top: 0;
+        left: 0;
+        right: 0;
+        height: $segment-height;
+      }
+    }
+  }
+}
diff --git a/assets/css/components/side-navigation.scss b/assets/css/components/side-navigation.scss
new file mode 100644
index 0000000..f94723c
--- /dev/null
+++ b/assets/css/components/side-navigation.scss
@@ -0,0 +1,76 @@
+.side-navigation {
+  ul {
+    list-style: none;
+    margin: 0;
+    padding-left: 0;
+  }
+
+  // nested lists indentation
+  li > ul {
+    padding-left: 1em;
+    border-left: 1px solid var(--borderColor);
+  }
+
+  li {
+    margin: 0;
+  }
+
+  // shared styles for links and toggle buttons
+  a,
+  button[aria-expanded] {
+    display: block;
+    width: 100%;
+    padding: 0.5em 1em;
+    color: var(--linkColor);
+    text-decoration: none;
+    border: none;
+    border-left: 3px solid transparent;
+    background: none;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--hoverOverlay);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--linkColor);
+      outline-offset: -2px;
+    }
+  }
+
+  // current page indicator
+  a[aria-current="page"],
+  button[aria-current="page"] {
+    border-left: 3px solid var(--textColor);
+    font-weight: 700;
+    color: var(--textColor);
+  }
+
+  // expand / collapse chevron indicator
+  button[aria-expanded]::before {
+    content: "";
+    display: inline-block;
+    width: 0.4em;
+    height: 0.4em;
+    margin-right: 0.5em;
+    border-right: 2px solid currentcolor;
+    border-bottom: 2px solid currentcolor;
+    transform: rotate(-45deg);
+    transition: transform 0.15s ease;
+    vertical-align: middle;
+  }
+
+  button[aria-expanded="true"]::before {
+    transform: rotate(45deg);
+  }
+
+  // hide children when collapsed.
+  // Only applied once JS has enhanced the nav (data-js-enhanced). Without JS,
+  // submenus stay visible so the content is never permanently hidden
+  // (progressive enhancement).
+  &[data-js-enhanced] button[aria-expanded="false"] + ul {
+    display: none;
+  }
+}
diff --git a/assets/css/components/tree-view.scss b/assets/css/components/tree-view.scss
new file mode 100644
index 0000000..ebadbba
--- /dev/null
+++ b/assets/css/components/tree-view.scss
@@ -0,0 +1,77 @@
+.tree-view {
+  list-style: none;
+  margin: 0;
+  padding: 0.5em;
+  border: 1px solid var(--borderColor);
+  border-radius: 4px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding-left: 1.25em;
+  }
+
+  [role="treeitem"] {
+    position: relative;
+  }
+
+  .tree-view__label {
+    display: inline-block;
+    width: 100%;
+    padding: 0.25em 0.5em;
+    border-radius: 4px;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  // hover
+  [role="treeitem"] > .tree-view__label:hover {
+    background-color: var(--hoverOverlay);
+  }
+
+  // focus visible — only the rovingly-focused treeitem
+  [role="treeitem"]:focus {
+    outline: none;
+  }
+
+  [role="treeitem"]:focus > .tree-view__label {
+    outline: 2px solid var(--linkColor);
+    outline-offset: -2px;
+  }
+
+  // selected state — background contrast against the tree background ≥ 4.5:1
+  [role="treeitem"][aria-selected="true"] > .tree-view__label {
+    background-color: var(--textColor);
+    color: var(--backgroundColor);
+    font-weight: 700;
+  }
+
+  // expand / collapse chevron for parent nodes
+  [role="treeitem"][aria-expanded] > .tree-view__label::before {
+    content: "";
+    display: inline-block;
+    width: 0.4em;
+    height: 0.4em;
+    margin-right: 0.5em;
+    border-right: 2px solid currentcolor;
+    border-bottom: 2px solid currentcolor;
+    transform: rotate(-45deg);
+    transition: transform 0.15s ease;
+    vertical-align: middle;
+  }
+
+  [role="treeitem"][aria-expanded="true"] > .tree-view__label::before {
+    transform: rotate(45deg);
+  }
+
+  // indent for leaf nodes so they align with parent labels
+  [role="treeitem"]:not([aria-expanded]) > .tree-view__label {
+    padding-left: calc(0.5em + 0.4em + 0.5em);
+  }
+
+  // hide children when collapsed
+  [role="treeitem"][aria-expanded="false"] > [role="group"] {
+    display: none;
+  }
+}
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 726a4fd..5cc3597 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -25,6 +25,11 @@
 @import "components/modal";
 @import "components/search-feedback";
 @import "components/toolbar";
+@import "components/side-navigation"; 
+@import "components/tree-view";
+@import "components/pagination";
+@import "components/progress-stepper";
+@import "components/file-upload";
 
 body,
 button,
diff --git a/content/components/file-upload/_index.md b/content/components/file-upload/_index.md
new file mode 100644
index 0000000..f28622a
--- /dev/null
+++ b/content/components/file-upload/_index.md
@@ -0,0 +1,72 @@
+---
+title: 檔案上傳 (File Upload)
+maturity: "new"
+---
+
+### 說明
+
+- 檔案上傳（File Upload）讓使用者選擇本機檔案並上傳至系統，支援以「點擊選擇」或「拖曳至上傳區」兩種方式選取檔案。
+- 視覺風格方形虛線拖放區搭配 outline 樣式的「選擇檔案」按鈕，並保留 HTML 原生 input 的可及性與功能。
+
+### 預設
+
+{{< live-example partial="file-upload/file-upload_default.html" >}}
+
+### 多檔案上傳
+
+{{< live-example partial="file-upload/file-upload_multiple.html" >}}
+
+### 已選取檔案的呈現
+
+選取後以清單呈現所選檔案，每個項目提供「移除」按鈕。實際應用時需以 JavaScript 監聽 `change` 事件，動態更新清單。
+
+{{< live-example partial="file-upload/file-upload_selected.html" >}}
+
+### 錯誤狀態
+
+{{< live-example partial="file-upload/file-upload_error.html" >}}
+
+#### CSS
+
+- `.file-upload`：拖放區外層容器。
+- `.file-upload__input`：原生 `<input type="file">`，以絕對定位覆蓋整個拖放區、視覺透明，但仍是真正的互動元素。
+- `.file-upload__dropzone`：拖放區內視覺裝飾內容，以 `aria-hidden="true"` 隱藏避免重複朗讀。
+- `.file-upload__button`：仿造按鈕外觀的 `<span>`，僅供視覺呈現。
+- `.file-upload__instruction`：拖放說明文字。
+- `.file-upload--error`：錯誤狀態，搭配 `.fieldset-has-error` 與 `.field-error` 使用。
+- `.file-upload--has-files`：已選擇檔案後的樣式。
+- `.file-upload__file-list`/`.file-upload__file`：已選檔案清單與單一項目。
+- `.file-upload__file-remove`：移除單一檔案的按鈕。
+
+#### 使用規範
+
+- **必要時才要求上傳**：上傳對使用者而言成本較高，僅在流程確實需要時才使用。
+- **明確告知限制**：在 `field-hint` 中清楚列出可接受的檔案類型、單檔大小上限、檔案數量上限。
+- **同時支援點擊與拖曳**：拖放區同時支援滑鼠點擊、鍵盤觸發、拖曳放置三種互動方式。
+- **多檔案請使用 `multiple`**：在 `<input>` 加上 `multiple` 屬性即可支援；說明文字也應同步更新為複數。
+- **限制檔案類型用 `accept`**：例如 `accept=".pdf,.jpg,.png"`；但仍須在伺服器端驗證，因為 `accept` 僅為前端篩選提示。
+- **錯誤訊息要明確**：說明錯誤原因與下一步該怎麼做，例如「所選檔案大小超過 10MB，請選擇較小的檔案」。
+
+#### 親和力
+
+- **保留原生 Input**：所有自訂視覺外觀皆建構於原生 `<input>` 之上，並以絕對定位 + `opacity: 0` 覆蓋整個拖放區，使其同時：
+  - 接收滑鼠點擊以開啟系統檔案對話框
+  - 原生支援拖曳放置
+  - 由 `<label>` 提供無障礙名稱，螢幕報讀軟體會朗讀「選擇檔案 按鈕，未選擇任何檔案」
+  - 受鍵盤焦點，並由 `:focus-within` 將焦點輪廓延伸至視覺按鈕
+- **裝飾內容以 `aria-hidden="true"` 隱藏**：拖放區內的視覺按鈕與「拖曳至此」說明文字，對螢幕報讀軟體而言會與 `<input>` 本身的朗讀重複，因此整個 `.file-upload__dropzone` 加上 `aria-hidden="true"`，避免雙重朗讀。
+- **使用 `aria-describedby` 連結提示與錯誤訊息**：說明檔案類型大小限制的提示文字、以及錯誤訊息，皆以 `aria-describedby` 連結至 `<input>`，讓螢幕報讀軟體在朗讀欄位時一併朗讀。
+- **錯誤狀態以 `aria-invalid="true"` 標示**：搭配視覺紅色邊框與「錯誤：」前綴文字，避免僅以顏色傳達錯誤狀態。
+- **點擊目標 ≥ 2.5rem**：拖放區、按鈕、移除按鈕的點擊目標皆不小於 2.5rem × 2.5rem。
+- **明顯的焦點外觀**：以 `:focus-within` 同時提示拖放區與內部視覺按鈕。
+- **語音控制（Voice control）友善**：可見的「選擇檔案」文字與 `<label>` 文字一致，使用者可直接以語音指令啟動。
+- **已選擇檔案以 `<ul aria-label>` 呈現**：螢幕報讀軟體可朗讀「已選擇的檔案，清單，共 N 項」，並可逐一朗讀檔名與大小。
+- **「移除」按鈕補上完整 `aria-label`**：例如「移除檔案：身分證正面.jpg」，避免僅朗讀「移除」造成混淆。
+- **漸進增強原則**：自訂行為（檔案清單、客製錯誤訊息、進度顯示）皆建構於原生 `<input type="file">` 之上；即使 JavaScript 失敗，使用者仍能以原生方式選擇與上傳檔案。
+
+### 參考資料
+
+- [デジタル庁デザインシステム - File upload／Drop area](https://design.digital.go.jp/dads/components/file-upload/)
+- [GOV.UK Design System - File upload](https://design-system.service.gov.uk/components/file-upload/)
+- [U.S. Web Design System - File input](https://designsystem.digital.gov/components/file-input/)
+- [MDN - `<input type="file">`](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/input/file)
diff --git a/content/components/pagination/_index.md b/content/components/pagination/_index.md
new file mode 100644
index 0000000..8ae5bde
--- /dev/null
+++ b/content/components/pagination/_index.md
@@ -0,0 +1,64 @@
+---
+title: 分頁 (Pagination)
+maturity: "new"
+---
+
+### 說明
+
+- 分頁（Pagination）用於將大量內容拆分成多個頁面，並提供使用者在頁面間前後移動、或直接跳至特定頁面的導覽功能。
+- 常見於搜尋結果、文章列表、資料表格等長內容清單。
+- 元件設計為包含 7 個等寬且等距的元素，並排成一行以保持視覺穩定。
+
+### 已知總頁數
+
+適用於後端已知總筆數、能計算出總頁數的情境，例如搜尋結果、資料列表。
+
+{{< live-example partial="pagination/pagination_bounded.html" >}}
+
+### 未知總頁數
+
+適用於無法預先得知總頁數的情境，例如串流資料、API 分頁。不顯示「最後一頁」，並在序列末端維持省略符號。
+
+{{< live-example partial="pagination/pagination_unbounded.html" >}}
+
+### 簡易分頁
+
+頁數很少時，可省略省略符號與「最後一頁」：
+
+{{< live-example partial="pagination/pagination_basic.html" >}}
+
+#### CSS
+
+- `.pagination`：最外層 `nav` 容器。
+- `.pagination__list`：頁碼清單（`ul`）。
+- `.pagination__item`：單一頁碼項目（`li`）。
+- `.pagination__item--arrow`：上一頁、下一頁的項目。
+- `.pagination__item--overflow`：省略中間頁碼的項目，用以顯示「…」符號。
+- `.pagination__link`：頁碼連結（`a`）。
+- `.pagination__link--prev`、`.pagination__link--next`：上一頁、下一頁連結。
+
+#### 使用規範
+- **頁數較少時縮減元素**：若總頁數少於 7 頁，應移除多餘的元素，僅顯示實際頁數。
+- **標示當前頁面**：必須明確標示使用者當前所在的頁碼。
+- **首末頁隱藏箭頭**：當位於第一頁時，隱藏「上一頁」連結；當位於最後一頁時，隱藏「下一頁」連結。
+- **鄰近頁面**：在當前頁碼的左右兩側，必須始終顯示其相鄰的頁碼連結
+- **使用省略號標示缺失頁面**：當頁碼序列不連續時，應使用省略符號來代表中間缺失的頁面。
+- **已知總頁數的省略位置**：省略符號僅能出現在第一頁之後或最後一頁之前
+- **未知總頁數的省略位置**：最後一個元素固定顯示為省略符號, 當頁碼進入第四頁以上時, 當前頁碼應固定出現在元件正中間
+
+
+#### 親和力
+
+- 使用 `<nav>` 元素並加上 `aria-label`（例如「搜尋結果分頁」），使其成為頁面地標（landmark），讓輔助科技使用者可快速定位。當頁面存在多組分頁時，務必以不同的 `aria-label` 加以區分。
+- 頁碼以 `<ul>`／`<li>` 原生清單語意呈現。
+- 每個頁碼連結透過 `aria-label` 補充完整語意。
+- 目前所在頁碼以 `aria-current="page"` 標示，並於 `aria-label` 附加「目前頁面」。
+- 上一頁、下一頁連結加上 `rel="prev"`、`rel="next"` 屬性，協助輔助科技理解頁面關係。
+- 與省略符號以 `aria-hidden="true"` 隱藏，避免干擾朗讀；省略項目本身則以 `aria-label="省略中間頁碼"` 補上有意義的說明。
+- 連結最小點擊區域不小於 2.5rem × 2.5rem。
+- 提供清楚的鍵盤焦點外觀。
+
+### 參考資料
+
+- [U.S. Web Design System - Pagination](https://designsystem.digital.gov/components/pagination/)
+- [デジタル庁デザインシステム - Page navigation](https://design.digital.go.jp/dads/components/page-navigation/)
diff --git a/content/components/progress-stepper/_index.md b/content/components/progress-stepper/_index.md
new file mode 100644
index 0000000..be56001
--- /dev/null
+++ b/content/components/progress-stepper/_index.md
@@ -0,0 +1,65 @@
+---
+title: 步驟指示器 (Progress Stepper)
+maturity: "new"
+---
+
+### 說明
+
+- 步驟指示器（Progress Stepper）用於向使用者呈現其在多步驟流程中的進度，例如線上申辦、多頁表單、結帳等情境。
+- 適合用於有明確線性順序、且可拆分為 3 個以上階段的流程。
+
+### 預設（含標籤）
+
+{{< live-example partial="progress-stepper/progress-stepper_default.html" >}}
+
+### 含編號
+
+以數字圓圈強化「第幾步」的視覺暗示，適合需要強調步驟順序的流程。
+
+{{< live-example partial="progress-stepper/progress-stepper_counters.html" >}}
+
+### 無標籤
+
+當步驟名稱過長或空間有限時使用。標籤列以 `aria-hidden="true"` 隱藏避免螢幕報讀軟體朗讀無意義資訊，進度資訊仍由下方標題傳達。
+
+{{< live-example partial="progress-stepper/progress-stepper_no-labels.html" >}}
+
+#### CSS
+
+- `.progress-stepper`：最外層容器。
+- `.progress-stepper--counters`：數字編號變體。
+- `.progress-stepper--no-labels`：無標籤變體。
+- `.progress-stepper__segments`：步驟清單（`ol`）。
+- `.progress-stepper__segment`：單一步驟項目（`li`）。
+- `.progress-stepper__segment--complete`：已完成步驟。
+- `.progress-stepper__segment--current`：目前步驟。
+- `.progress-stepper__label`：步驟文字標籤。
+- `.progress-stepper__counter`：數字編號圓圈（僅 counter 變體）。
+- `.progress-stepper__status-text`：視覺隱藏的完成狀態文字（供螢幕報讀軟體朗讀）。
+- `.progress-stepper__heading`：步驟指示器下方的標題區。
+- `.progress-stepper__heading-counter`：「第 N 步，共 M 步」文字。
+
+#### 使用規範
+
+- **明顯區別目前步驟**：目前步驟應是視覺上最為突出的，其次是已完成步驟，未完成步驟最弱；但未完成步驟仍需符合色彩對比規範，不應看起來像「停用」狀態。
+- **使用簡短標籤**：標籤請用短詞或單一詞彙；若標籤過長，改採用無標籤版本。
+- **導覽另外提供**：步驟指示器不負責頁面切換；請以「上一步／下一步」按鈕提供導覽。
+- **標題放在指示器下方**：每個步驟頁面都應有明確的頁面標題；步驟指示器的標籤不足以作為頁面標題。
+- **顯示「第 N 步，共 M 步」**：在標題旁顯示目前進度數字，強化使用者對流程的掌握。
+- **避免過多步驟**：若步驟超過 6 個，應考慮拆分為多個子流程或改用其他呈現方式。
+
+#### 親和力
+
+- 使用 `<ol>` 原生有序清單語意呈現步驟。
+- 以 `aria-current="step"` 標示目前所在的步驟項目，讓輔助科技使用者得知自己位於整個流程的何處。
+- 每個步驟內以視覺隱藏的文字補上「已完成」「未完成」等完成狀態，避免僅以顏色傳達資訊。
+- 目前步驟不加「已完成／未完成」狀態文字，避免重複朗讀。
+- 無標籤變體將整個 `<ol>` 以 `aria-hidden="true"` 隱藏，因為其中無實質內容；進度資訊由下方的「第 N 步，共 M 步 — 步驟名稱」標題傳達，確保輔助科技使用者仍能獲得完整資訊。
+- counter 變體中的數字圓圈僅為視覺裝飾，以 `aria-hidden="true"` 隱藏，避免螢幕報讀軟體朗讀出與順序重複的數字。
+- 步驟指示器本身不具互動功能，因此不需處理鍵盤焦點；若未來要將各步驟設計為可點擊回溯，應改為 `<a>` 或 `<button>`，並處理 `:focus-visible` 樣式。
+
+### 參考資料
+
+- [U.S. Web Design System - Step indicator](https://designsystem.digital.gov/components/step-indicator/)
+- [デジタル庁デザインシステム - Step navigation](https://design.digital.go.jp/dads/components/step-navigation/)
+- [MDN - aria-current](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
diff --git a/content/components/side-navigation/_index.md b/content/components/side-navigation/_index.md
new file mode 100644
index 0000000..2ebfdf6
--- /dev/null
+++ b/content/components/side-navigation/_index.md
@@ -0,0 +1,46 @@
+---
+title: 側邊導覽 (Side Navigation)
+maturity: "new"
+---
+
+### 基本側邊導覽
+
+- 單層子選單，可透過點擊或鍵盤展開/收合
+- 以左側粗邊框標示目前頁面
+
+{{< live-example partial="side-navigation/side_navigation_basic.html" >}}
+
+### 多層巢狀導覽
+
+- 支援三層以上的巢狀結構
+- 子層以縮排與左側邊線區分層級
+
+{{< live-example partial="side-navigation/side_navigation_nested.html" >}}
+
+#### CSS
+
+- `.side-navigation`：套用於 `<nav>` 容器
+- `aria-current="page"`：目前頁面連結，自動套用粗體與左側指示邊框
+
+#### JavaScript
+
+- 使用 [`side-navigation.js`]({{< relURL "js/components/side-navigation.js" >}})。
+- JavaScript 選擇器為 `.side-navigation`，負責切換 `<button>` 的 `aria-expanded` 狀態。
+
+
+#### 親和力
+
+
+- 使用原生 `<nav>` + `<ul>` + `<button>` 傳達結構、階層與互動狀態
+- 當前頁面同時以粗體與左側邊框指示，不僅依賴色彩
+- 所有互動均可透過 Tab + Enter/Space 操作
+- DOM 順序即為焦點順序，與視覺呈現一致
+- 鍵盤焦點有清楚的外框指示
+- 原生元素自帶角色；`aria-expanded` 傳達展開狀態；`aria-current` 傳達目前頁面
+
+### 參考資料
+
+- [USWDS — Side Navigation](https://designsystem.digital.gov/components/side-navigation/)
+
+{{< asset-script "js/components/side-navigation.js" >}}
+
diff --git a/content/components/tree-view/_index.md b/content/components/tree-view/_index.md
new file mode 100644
index 0000000..fe0951a
--- /dev/null
+++ b/content/components/tree-view/_index.md
@@ -0,0 +1,64 @@
+---
+title: 樹狀檢視 (Tree View)
+maturity: "new"
+---
+
+### 說明
+
+樹狀檢視用於呈現具有階層關係的資料結構，例如檔案目錄、組織架構等。
+
+### 基本範例
+
+- 以原生 `<ul>` / `<li>` 為語意基礎，再以 ARIA 屬性補足樹狀結構語意
+- 支援完整鍵盤操作
+- 採用 Roving tabindex 焦點管理：整個樹狀檢視只佔一個 Tab 停靠點
+
+{{< live-example partial="tree-view/tree_view_basic.html" >}}
+
+
+#### ARIA 屬性
+
+| 屬性 | 套用於 | 說明 |
+|---|---|---|
+| `role="tree"` | 最外層 `<ul>` | 標示此為樹狀檢視元件 |
+| `role="group"` | 巢狀 `<ul>` | 標示子節點群組 |
+| `role="treeitem"` | `<li>` | 標示每個節點 |
+| `aria-expanded` | 分支節點 `<li>` | `true` 已展開 / `false` 已收合；葉節點**不**加此屬性 |
+| `aria-selected` | `<li>` | 是否為·目前選取的節點 |
+| `aria-level` | 每個 `<li>` | 明確宣告層級，修正部分報讀器無法自動計算層級的問題 |
+| `aria-labelledby` | `<li>` | 指向內部文字的 `id`，解決 VoiceOver 對 `<li>` 內部複雜結構的相容性問題 |
+| `aria-current="true"` | `<li>` | 深連結（deep link）到此節點時使用 |
+| `tabindex` | `<li>` | Roving tabindex：僅目前焦點節點為 `0`，其餘為 `-1` |
+
+#### JavaScript
+
+- 使用 [`tree-view.js`]({{< relURL "js/components/tree-view.js" >}})。
+- JavaScript 選擇器為 `[role="tree"].tree-view`，同時具備 class 與 role 才會初始化。
+
+#### 鍵盤操作
+
+| 按鍵 | 說明 |
+|---|---|
+| `↓` / `↑` | 移動焦點至下一個 / 上一個可見節點 |
+| `→` | 若為已收合的分支節點則展開；若為已展開的分支節點則移至第一個子節點 |
+| `←` | 若為已展開的分支節點則收合；若為葉節點或已收合節點則移至父節點 |
+| `Home` / `End` | 移至第一個 / 最後一個可見節點 |
+| `Enter` / `Space` | 選取節點；若為分支節點則同時切換展開 / 收合 |
+
+#### 親和力
+
+- 以原生 `<ul>` / `<li>` 作為語意基礎
+- 整個元件包在一個 Tab 停靠點中，避免大型樹狀結構造成過多 Tab 停留
+- `aria-level` 明確宣告層級，不依賴瀏覽器自動推算
+- `aria-labelledby` 指向節點文字元素，確保 VoiceOver on macOS / iOS 能正確朗讀名稱
+- 鍵盤焦點有清楚的外框指示
+- 不依賴色彩傳達選取狀態
+
+### 參考資料
+
+- [WAI-ARIA APG — Tree View Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/)
+- [GitHub — Considerations for making a tree view component accessible](https://github.blog/engineering/user-experience/considerations-for-making-a-tree-view-component-accessible/)
+- [Primer — Tree View](https://primer.style/components/tree-view)
+
+{{< asset-script "js/components/tree-view.js" >}}
+
diff --git a/layouts/_partials/file-upload/file-upload_default.html b/layouts/_partials/file-upload/file-upload_default.html
new file mode 100644
index 0000000..69e83d9
--- /dev/null
+++ b/layouts/_partials/file-upload/file-upload_default.html
@@ -0,0 +1,11 @@
+<div class="fieldset">
+  <label for="fu-default" class="field-label">附件上傳</label>
+  <p id="fu-default-hint" class="field-hint">支援 PDF、JPG、PNG 格式，單一檔案大小不得超過 10MB。</p>
+  <div class="file-upload">
+    <input type="file" id="fu-default" class="file-upload__input" aria-describedby="fu-default-hint">
+    <div class="file-upload__dropzone" aria-hidden="true">
+      <span class="file-upload__button">選擇檔案</span>
+      <span class="file-upload__instruction">或將檔案拖曳至此處</span>
+    </div>
+  </div>
+</div>
diff --git a/layouts/_partials/file-upload/file-upload_error.html b/layouts/_partials/file-upload/file-upload_error.html
new file mode 100644
index 0000000..a1e24be
--- /dev/null
+++ b/layouts/_partials/file-upload/file-upload_error.html
@@ -0,0 +1,14 @@
+<div class="fieldset fieldset-has-error">
+  <label for="fu-error" class="field-label">附件上傳</label>
+  <p id="fu-error-hint" class="field-hint">支援 PDF、JPG、PNG 格式，單一檔案大小不得超過 10MB。</p>
+  <p id="fu-error-msg" class="field-error">
+    <span class="field-error__prefix">錯誤：</span>所選檔案大小超過 10MB，請選擇較小的檔案。
+  </p>
+  <div class="file-upload file-upload--error">
+    <input type="file" id="fu-error" class="file-upload__input" aria-describedby="fu-error-hint fu-error-msg" aria-invalid="true">
+    <div class="file-upload__dropzone" aria-hidden="true">
+      <span class="file-upload__button">選擇檔案</span>
+      <span class="file-upload__instruction">或將檔案拖曳至此處</span>
+    </div>
+  </div>
+</div>
diff --git a/layouts/_partials/file-upload/file-upload_multiple.html b/layouts/_partials/file-upload/file-upload_multiple.html
new file mode 100644
index 0000000..745678b
--- /dev/null
+++ b/layouts/_partials/file-upload/file-upload_multiple.html
@@ -0,0 +1,11 @@
+<div class="fieldset">
+  <label for="fu-multi" class="field-label">證明文件（可選擇多個檔案）</label>
+  <p id="fu-multi-hint" class="field-hint">支援 PDF、JPG、PNG 格式，每個檔案不得超過 10MB，最多可上傳 5 個檔案。</p>
+  <div class="file-upload">
+    <input type="file" id="fu-multi" class="file-upload__input" multiple accept=".pdf,.jpg,.jpeg,.png" aria-describedby="fu-multi-hint">
+    <div class="file-upload__dropzone" aria-hidden="true">
+      <span class="file-upload__button">選擇檔案</span>
+      <span class="file-upload__instruction">或將多個檔案拖曳至此處</span>
+    </div>
+  </div>
+</div>
diff --git a/layouts/_partials/file-upload/file-upload_selected.html b/layouts/_partials/file-upload/file-upload_selected.html
new file mode 100644
index 0000000..d195341
--- /dev/null
+++ b/layouts/_partials/file-upload/file-upload_selected.html
@@ -0,0 +1,25 @@
+<div class="fieldset">
+  <label for="fu-selected" class="field-label">證明文件（已選擇）</label>
+  <p id="fu-selected-hint" class="field-hint">支援 PDF、JPG、PNG 格式，每個檔案不得超過 10MB。</p>
+  <div class="file-upload file-upload--has-files">
+    <input type="file" id="fu-selected" class="file-upload__input" multiple aria-describedby="fu-selected-hint">
+    <div class="file-upload__dropzone" aria-hidden="true">
+      <span class="file-upload__button">變更檔案</span>
+      <span class="file-upload__instruction">或將檔案拖曳至此處</span>
+    </div>
+  </div>
+  <ul class="file-upload__file-list" aria-label="已選擇的檔案">
+    <li class="file-upload__file">
+      <span class="file-upload__file-icon" aria-hidden="true">📄</span>
+      <span class="file-upload__file-name">身分證正面.jpg</span>
+      <span class="file-upload__file-size">（256 KB）</span>
+      <button type="button" class="file-upload__file-remove" aria-label="移除檔案：身分證正面.jpg">移除</button>
+    </li>
+    <li class="file-upload__file">
+      <span class="file-upload__file-icon" aria-hidden="true">📄</span>
+      <span class="file-upload__file-name">身分證背面.jpg</span>
+      <span class="file-upload__file-size">（212 KB）</span>
+      <button type="button" class="file-upload__file-remove" aria-label="移除檔案：身分證背面.jpg">移除</button>
+    </li>
+  </ul>
+</div>
diff --git a/layouts/_partials/pagination/pagination_basic.html b/layouts/_partials/pagination/pagination_basic.html
new file mode 100644
index 0000000..127201d
--- /dev/null
+++ b/layouts/_partials/pagination/pagination_basic.html
@@ -0,0 +1,25 @@
+<nav aria-label="搜尋結果分頁" class="pagination">
+  <ul class="pagination__list">
+    <li class="pagination__item pagination__item--arrow">
+      <a href="?page=1" class="pagination__link pagination__link--prev" rel="prev" aria-label="上一頁">
+        <span class="pagination__chevron pagination__chevron--prev" aria-hidden="true"></span>
+        <span>上一頁</span>
+      </a>
+    </li>
+    <li class="pagination__item">
+      <a href="?page=1" class="pagination__link" aria-label="第 1 頁">1</a>
+    </li>
+    <li class="pagination__item">
+      <a href="?page=2" class="pagination__link" aria-label="第 2 頁,目前頁面" aria-current="page">2</a>
+    </li>
+    <li class="pagination__item">
+      <a href="?page=3" class="pagination__link" aria-label="第 3 頁">3</a>
+    </li>
+    <li class="pagination__item pagination__item--arrow">
+      <a href="?page=3" class="pagination__link pagination__link--next" rel="next" aria-label="下一頁">
+        <span>下一頁</span>
+        <span class="pagination__chevron pagination__chevron--next" aria-hidden="true"></span>
+      </a>
+    </li>
+  </ul>
+</nav>
diff --git a/layouts/_partials/pagination/pagination_bounded.html b/layouts/_partials/pagination/pagination_bounded.html
new file mode 100644
index 0000000..8ba9bb9
--- /dev/null
+++ b/layouts/_partials/pagination/pagination_bounded.html
@@ -0,0 +1,37 @@
+<nav aria-label="搜尋結果分頁" class="pagination">
+  <ul class="pagination__list">
+    <li class="pagination__item pagination__item--arrow">
+      <a href="?page=9" class="pagination__link pagination__link--prev" rel="prev" aria-label="上一頁">
+        <span class="pagination__chevron pagination__chevron--prev" aria-hidden="true"></span>
+        <span>上一頁</span>
+      </a>
+    </li>
+    <li class="pagination__item">
+      <a href="?page=1" class="pagination__link" aria-label="第 1 頁">1</a>
+    </li>
+    <li class="pagination__item pagination__item--overflow" aria-label="省略中間頁碼">
+      <span aria-hidden="true">…</span>
+    </li>
+    <li class="pagination__item">
+      <a href="?page=9" class="pagination__link" aria-label="第 9 頁">9</a>
+    </li>
+    <li class="pagination__item">
+      <a href="?page=10" class="pagination__link" aria-label="第 10 頁,目前頁面" aria-current="page">10</a>
+    </li>
+    <li class="pagination__item">
+      <a href="?page=11" class="pagination__link" aria-label="第 11 頁">11</a>
+    </li>
+    <li class="pagination__item pagination__item--overflow" aria-label="省略後續頁碼">
+      <span aria-hidden="true">…</span>
+    </li>
+    <li class="pagination__item">
+      <a href="?page=24" class="pagination__link" aria-label="最後一頁,第 24 頁">24</a>
+    </li>
+    <li class="pagination__item pagination__item--arrow">
+      <a href="?page=11" class="pagination__link pagination__link--next" rel="next" aria-label="下一頁">
+        <span>下一頁</span>
+        <span class="pagination__chevron pagination__chevron--next" aria-hidden="true"></span>
+      </a>
+    </li>
+  </ul>
+</nav>
diff --git a/layouts/_partials/pagination/pagination_unbounded.html b/layouts/_partials/pagination/pagination_unbounded.html
new file mode 100644
index 0000000..b5be17a
--- /dev/null
+++ b/layouts/_partials/pagination/pagination_unbounded.html
@@ -0,0 +1,37 @@
+<nav aria-label="搜尋結果分頁" class="pagination">
+  <ul class="pagination__list">
+    <li class="pagination__item pagination__item--arrow">
+      <a href="?page=4" class="pagination__link pagination__link--prev" rel="prev" aria-label="上一頁">
+        <span class="pagination__chevron pagination__chevron--prev" aria-hidden="true"></span>
+        <span>上一頁</span>
+      </a>
+    </li>
+    <li class="pagination__item">
+      <a href="?page=1" class="pagination__link" aria-label="第 1 頁">1</a>
+    </li>
+    <li class="pagination__item pagination__item--overflow" aria-label="省略中間頁碼">
+      <span aria-hidden="true">…</span>
+    </li>
+    <li class="pagination__item">
+      <a href="?page=4" class="pagination__link" aria-label="第 4 頁">4</a>
+    </li>
+    <li class="pagination__item">
+      <a href="?page=5" class="pagination__link" aria-label="第 5 頁,目前頁面" aria-current="page">5</a>
+    </li>
+    <li class="pagination__item">
+      <a href="?page=6" class="pagination__link" aria-label="第 6 頁">6</a>
+    </li>
+    <li class="pagination__item">
+      <a href="?page=7" class="pagination__link" aria-label="第 7 頁">7</a>
+    </li>
+    <li class="pagination__item pagination__item--overflow" aria-label="省略後續頁碼">
+      <span aria-hidden="true">…</span>
+    </li>
+    <li class="pagination__item pagination__item--arrow">
+      <a href="?page=6" class="pagination__link pagination__link--next" rel="next" aria-label="下一頁">
+        <span>下一頁</span>
+        <span class="pagination__chevron pagination__chevron--next" aria-hidden="true"></span>
+      </a>
+    </li>
+  </ul>
+</nav>
diff --git a/layouts/_partials/progress-stepper/progress-stepper_counters.html b/layouts/_partials/progress-stepper/progress-stepper_counters.html
new file mode 100644
index 0000000..c4ac74a
--- /dev/null
+++ b/layouts/_partials/progress-stepper/progress-stepper_counters.html
@@ -0,0 +1,38 @@
+<div class="progress-stepper progress-stepper--counters">
+  <ol class="progress-stepper__segments">
+    <li class="progress-stepper__segment progress-stepper__segment--complete">
+      <span class="progress-stepper__counter" aria-hidden="true">1</span>
+      <span class="progress-stepper__label">個人資料</span>
+      <span class="progress-stepper__status-text">已完成</span>
+    </li>
+    <li class="progress-stepper__segment progress-stepper__segment--complete">
+      <span class="progress-stepper__counter" aria-hidden="true">2</span>
+      <span class="progress-stepper__label">家戶狀態</span>
+      <span class="progress-stepper__status-text">已完成</span>
+    </li>
+    <li class="progress-stepper__segment progress-stepper__segment--current" aria-current="step">
+      <span class="progress-stepper__counter" aria-hidden="true">3</span>
+      <span class="progress-stepper__label">檢附文件</span>
+    </li>
+    <li class="progress-stepper__segment">
+      <span class="progress-stepper__counter" aria-hidden="true">4</span>
+      <span class="progress-stepper__label">簽章</span>
+      <span class="progress-stepper__status-text">未完成</span>
+    </li>
+    <li class="progress-stepper__segment">
+      <span class="progress-stepper__counter" aria-hidden="true">5</span>
+      <span class="progress-stepper__label">檢閱與送出</span>
+      <span class="progress-stepper__status-text">未完成</span>
+    </li>
+  </ol>
+  <div class="progress-stepper__heading">
+    <span class="progress-stepper__heading-counter">
+      <span class="progress-stepper__heading-text">第</span>
+      <span class="progress-stepper__current-step">3</span>
+      <span class="progress-stepper__heading-text">步，共</span>
+      <span class="progress-stepper__total-steps">5</span>
+      <span class="progress-stepper__heading-text">步</span>
+    </span>
+    <h4 class="progress-stepper__heading-text">檢附文件</h4>
+  </div>
+</div>
diff --git a/layouts/_partials/progress-stepper/progress-stepper_default.html b/layouts/_partials/progress-stepper/progress-stepper_default.html
new file mode 100644
index 0000000..5c3d0c2
--- /dev/null
+++ b/layouts/_partials/progress-stepper/progress-stepper_default.html
@@ -0,0 +1,33 @@
+<div class="progress-stepper">
+  <ol class="progress-stepper__segments">
+    <li class="progress-stepper__segment progress-stepper__segment--complete">
+      <span class="progress-stepper__label">個人資料</span>
+      <span class="progress-stepper__status-text">已完成</span>
+    </li>
+    <li class="progress-stepper__segment progress-stepper__segment--complete">
+      <span class="progress-stepper__label">家戶狀態</span>
+      <span class="progress-stepper__status-text">已完成</span>
+    </li>
+    <li class="progress-stepper__segment progress-stepper__segment--current" aria-current="step">
+      <span class="progress-stepper__label">檢附文件</span>
+    </li>
+    <li class="progress-stepper__segment">
+      <span class="progress-stepper__label">簽章</span>
+      <span class="progress-stepper__status-text">未完成</span>
+    </li>
+    <li class="progress-stepper__segment">
+      <span class="progress-stepper__label">檢閱與送出</span>
+      <span class="progress-stepper__status-text">未完成</span>
+    </li>
+  </ol>
+  <div class="progress-stepper__heading">
+    <span class="progress-stepper__heading-counter">
+      <span class="progress-stepper__heading-text">第</span>
+      <span class="progress-stepper__current-step">3</span>
+      <span class="progress-stepper__heading-text">步，共</span>
+      <span class="progress-stepper__total-steps">5</span>
+      <span class="progress-stepper__heading-text">步</span>
+    </span>
+    <h4 class="progress-stepper__heading-text">檢附文件</h4>
+  </div>
+</div>
diff --git a/layouts/_partials/progress-stepper/progress-stepper_no-labels.html b/layouts/_partials/progress-stepper/progress-stepper_no-labels.html
new file mode 100644
index 0000000..40b58b7
--- /dev/null
+++ b/layouts/_partials/progress-stepper/progress-stepper_no-labels.html
@@ -0,0 +1,19 @@
+<div class="progress-stepper progress-stepper--no-labels">
+  <ol class="progress-stepper__segments" aria-hidden="true">
+    <li class="progress-stepper__segment progress-stepper__segment--complete"></li>
+    <li class="progress-stepper__segment progress-stepper__segment--complete"></li>
+    <li class="progress-stepper__segment progress-stepper__segment--current"></li>
+    <li class="progress-stepper__segment"></li>
+    <li class="progress-stepper__segment"></li>
+  </ol>
+  <div class="progress-stepper__heading">
+    <span class="progress-stepper__heading-counter">
+      <span class="progress-stepper__heading-text">第</span>
+      <span class="progress-stepper__current-step">3</span>
+      <span class="progress-stepper__heading-text">步，共</span>
+      <span class="progress-stepper__total-steps">5</span>
+      <span class="progress-stepper__heading-text">步</span>
+    </span>
+    <h4 class="progress-stepper__heading-text">檢附文件</h4>
+  </div>
+</div>
diff --git a/layouts/_partials/side-navigation/side_navigation_basic.html b/layouts/_partials/side-navigation/side_navigation_basic.html
new file mode 100644
index 0000000..f1e0f22
--- /dev/null
+++ b/layouts/_partials/side-navigation/side_navigation_basic.html
@@ -0,0 +1,27 @@
+<nav aria-label="側邊導覽" class="side-navigation">
+  <ul>
+    <li>
+      <a aria-current="page" href="#about">關於我們</a>
+    </li>
+    <li>
+      <button type="button" aria-expanded="false">最新消息</button>
+      <ul>
+        <li>
+            <a href="#news">新聞稿</a>
+        </li>
+        <li>
+            <a href="#event">活動公告</a>
+        </li>
+        <li>
+            <a href="#policy">政策更新</a>
+        </li>
+      </ul>
+    </li>
+    <li>
+      <a href="#question">常見問答</a>
+    </li>
+    <li>
+      <a href="#contact">聯絡我們</a>
+    </li>
+  </ul>
+</nav>
diff --git a/layouts/_partials/side-navigation/side_navigation_nested.html b/layouts/_partials/side-navigation/side_navigation_nested.html
new file mode 100644
index 0000000..b5500a3
--- /dev/null
+++ b/layouts/_partials/side-navigation/side_navigation_nested.html
@@ -0,0 +1,28 @@
+<nav aria-label="側邊導覽" class="side-navigation">
+  <ul>
+    <li>
+      <a href="#about" aria-current="page">關於我們</a>
+    </li>
+    <li>
+      <button type="button" aria-expanded="false">服務項目</button>
+      <ul>
+        <li><a href="#online-application">線上申辦</a></li>
+        <li>
+          <button type="button" aria-expanded="false">表單下載</button>
+          <ul>
+            <li><a href="#application-form">申請表</a></li>
+            <li><a href="#consent-form">同意書</a></li>
+            <li><a href="#affidavit">切結書</a></li>
+          </ul>
+        </li>
+        <li><a href="#progress-inquiry">進度查詢</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#regulations">法規資訊</a>
+    </li>
+    <li>
+      <a href="#contact">聯絡我們</a>
+    </li>
+  </ul>
+</nav>
diff --git a/layouts/_partials/tree-view/tree_view_basic.html b/layouts/_partials/tree-view/tree_view_basic.html
new file mode 100644
index 0000000..52e529e
--- /dev/null
+++ b/layouts/_partials/tree-view/tree_view_basic.html
@@ -0,0 +1,105 @@
+<ul
+  role="tree"
+  class="tree-view"
+>
+  <li
+    role="treeitem"
+    aria-expanded="true"
+    aria-level="1"
+    aria-selected="false"
+    aria-labelledby="tvb-src"
+    tabindex="0"
+  >
+    <span class="tree-view__label" id="tvb-src">採購招標作業程序</span>
+    <ul role="group">
+      <li
+        role="treeitem"
+        aria-expanded="false"
+        aria-level="2"
+        aria-selected="false"
+        aria-labelledby="tvb-js"
+        tabindex="-1"
+      >
+        <span class="tree-view__label" id="tvb-js">採購作業</span>
+        <ul role="group">
+          <li
+            role="treeitem"
+            aria-level="3"
+            aria-selected="false"
+            aria-labelledby="tvb-button"
+            tabindex="-1"
+          >
+            <span class="tree-view__label" id="tvb-button">公告金額以上</span>
+          </li>
+          <li
+            role="treeitem"
+            aria-level="3"
+            aria-selected="false"
+            aria-labelledby="tvb-input"
+            tabindex="-1"
+          >
+            <span class="tree-view__label" id="tvb-input">未達公告金額採購</span>
+          </li>
+        </ul>
+      </li>
+      <li
+        role="treeitem"
+        aria-level="2"
+        aria-selected="true"
+        aria-current="true"
+        aria-labelledby="tvb-index"
+        tabindex="-1"
+      >
+        <span class="tree-view__label" id="tvb-index">共同投標</span>
+      </li>
+      <li
+        role="treeitem"
+        aria-level="2"
+        aria-selected="false"
+        aria-labelledby="tvb-style"
+        tabindex="-1"
+      >
+        <span class="tree-view__label" id="tvb-style">緊急採購</span>
+      </li>
+    </ul>
+  </li>
+  <li
+    role="treeitem"
+    aria-expanded="false"
+    aria-level="1"
+    aria-selected="false"
+    aria-labelledby="tvb-tests"
+    tabindex="-1"
+  >
+    <span class="tree-view__label" id="tvb-tests">使用須知</span>
+    <ul role="group">
+      <li
+        role="treeitem"
+        aria-level="2"
+        aria-selected="false"
+        aria-labelledby="tvb-index-test"
+        tabindex="-1"
+      >
+        <span class="tree-view__label" id="tvb-index-test">採購標準作業程序</span>
+      </li>
+    </ul>
+  </li>
+  <li
+    role="treeitem"
+    aria-level="1"
+    aria-selected="false"
+    aria-labelledby="tvb-readme"
+    tabindex="-1"
+  >
+    <span class="tree-view__label" id="tvb-readme">自我檢核表</span>
+  </li>
+  <li
+    role="treeitem"
+    aria-level="1"
+    aria-selected="false"
+    aria-labelledby="tvb-package"
+    tabindex="-1"
+  >
+    <span class="tree-view__label" id="tvb-package">招決標方式評估</span>
+  </li>
+</ul>
diff --git a/static/js/components/date-picker.js b/static/js/components/date-picker.js
index 3ae8556..cdd7208 100644
--- a/static/js/components/date-picker.js
+++ b/static/js/components/date-picker.js
@@ -135,7 +135,6 @@
     this.closeBtn    = container.querySelector('.dp__close-btn');
     this.feedback    = container.querySelector('.dp__feedback');
 
-
     // 支援 data-min / data-max
     this.minDate = container.dataset.min || null;
     this.maxDate = container.dataset.max || null;
diff --git a/static/js/components/side-navigation.js b/static/js/components/side-navigation.js
new file mode 100644
index 0000000..3239bed
--- /dev/null
+++ b/static/js/components/side-navigation.js
@@ -0,0 +1,29 @@
+/**
+ * Side Navigation
+ *
+ * 使用原生 HTML 語意實作側邊導覽結構：
+ *   <nav>       — 導覽區塊（報讀器自動朗讀）
+ *   <ul>/<li>   — 清單與項目（報讀器自動朗讀項目數）
+ *   <a>         — 連結（報讀器朗讀「連結」）
+ *   <button>    — 展開/收合（報讀器朗讀「按鈕, 已收合/已展開」）
+ *
+ * JS 僅負責切換 button 的 aria-expanded 狀態。
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('.side-navigation').forEach(initSideNavigation)
+})
+
+function initSideNavigation (nav) {
+  // Mark the nav as JS-enhanced so CSS can hide collapsed submenus.
+  // Without this attribute, submenus stay visible even if JS fails to load.
+  nav.setAttribute('data-js-enhanced', '')
+
+  nav.addEventListener('click', (e) => {
+    const button = e.target.closest('.side-navigation button[aria-expanded]')
+    if (!button) return
+
+    const expanded = button.getAttribute('aria-expanded') === 'true'
+    button.setAttribute('aria-expanded', String(!expanded))
+  })
+}
diff --git a/static/js/components/tree-view.js b/static/js/components/tree-view.js
new file mode 100644
index 0000000..ddfa814
--- /dev/null
+++ b/static/js/components/tree-view.js
@@ -0,0 +1,186 @@
+/**
+ * Tree View
+ *
+ * 依據 WAI-ARIA APG Tree View Pattern 與 GitHub 工程師文章的建議實作：
+ *   https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-1a/
+ *   https://github.blog/engineering/user-experience/considerations-for-making-a-tree-view-component-accessible/
+ *
+ * 設計原則：
+ *   - 以原生 <ul> / <li> 作為語意基礎
+ *   - 以 ARIA 屬性補足樹狀結構語意（tree / treeitem / group / aria-expanded / aria-selected / aria-level）
+ *   - Roving tabindex 焦點管理（只有一個 treeitem tabindex="0"）
+ *   - 支援完整 APG 鍵盤操作
+ *
+ * 鍵盤操作：
+ *   ↓ / ↑         移動焦點至下一個 / 上一個可見節點
+ *   →             已收合 → 展開；已展開 → 移至第一個子節點
+ *   ←             已展開 → 收合；末端或已收合 → 移至父節點
+ *   Home / End    移至第一個 / 最後一個可見節點
+ *   Enter / Space 選取節點（aria-selected="true"）；若為分支節點則切換展開狀態
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.querySelectorAll('[role="tree"].tree-view').forEach(initTreeView)
+})
+
+function initTreeView (tree) {
+  const items = () => Array.from(tree.querySelectorAll(':scope [role="treeitem"]'))
+
+  // ---- Visibility: a treeitem is visible if none of its ancestor treeitems are collapsed ----
+  function isVisible (el) {
+    let node = el.parentElement
+    while (node && node !== tree) {
+      if (node.matches('[role="treeitem"][aria-expanded="false"]')) return false
+      node = node.parentElement
+    }
+    return true
+  }
+
+  function visibleItems () {
+    return items().filter(isVisible)
+  }
+
+  // ---- Ensure a single roving tabindex="0" ----
+  function ensureSingleTabstop () {
+    const all = items()
+    if (all.length === 0) return
+    const hasFocusable = all.some(it => it.tabIndex === 0)
+    all.forEach(it => {
+      if (it.tabIndex !== 0 && it.tabIndex !== -1) it.tabIndex = -1
+    })
+    if (!hasFocusable) {
+      // Per WAI-ARIA APG, if a node is already selected, place the initial
+      // tabstop on it so keyboard users land on the current selection;
+      // otherwise fall back to the first node.
+      const selected = all.find(it => it.getAttribute('aria-selected') === 'true')
+      ;(selected || all[0]).tabIndex = 0
+    }
+  }
+
+  ensureSingleTabstop()
+
+  // ---- Focus helpers ----
+  function setFocus (item) {
+    if (!item) return
+    items().forEach(it => { it.tabIndex = -1 })
+    item.tabIndex = 0
+    item.focus()
+  }
+
+  function moveFocus (current, delta) {
+    const vis = visibleItems()
+    const idx = vis.indexOf(current)
+    const next = vis[idx + delta]
+    if (next) setFocus(next)
+  }
+
+  function firstChild (item) {
+    const group = item.querySelector(':scope > [role="group"]')
+    if (!group) return null
+    return group.querySelector(':scope > [role="treeitem"]')
+  }
+
+  function parentItem (item) {
+    const group = item.parentElement
+    if (!group || group.getAttribute('role') !== 'group') return null
+    return group.closest('[role="treeitem"]')
+  }
+
+  function isBranch (item) {
+    return item.hasAttribute('aria-expanded')
+  }
+
+  function isExpanded (item) {
+    return item.getAttribute('aria-expanded') === 'true'
+  }
+
+  function expand (item) { if (isBranch(item)) item.setAttribute('aria-expanded', 'true') }
+  function collapse (item) { if (isBranch(item)) item.setAttribute('aria-expanded', 'false') }
+
+  function select (item) {
+    items().forEach(it => it.setAttribute('aria-selected', 'false'))
+    item.setAttribute('aria-selected', 'true')
+    tree.dispatchEvent(new CustomEvent('treeitemselect', {
+      bubbles: true,
+      detail: { item }
+    }))
+  }
+
+  // ---- Keyboard handler (delegated on tree) ----
+  tree.addEventListener('keydown', (e) => {
+    if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return
+    const current = e.target.closest('[role="treeitem"]')
+    if (!current || !tree.contains(current)) return
+
+    let handled = true
+    switch (e.key) {
+      case 'ArrowDown':
+        moveFocus(current, 1)
+        break
+      case 'ArrowUp':
+        moveFocus(current, -1)
+        break
+      case 'ArrowRight':
+        if (isBranch(current)) {
+          if (isExpanded(current)) {
+            const child = firstChild(current)
+            if (child) setFocus(child)
+          } else {
+            expand(current)
+          }
+        }
+        break
+      case 'ArrowLeft':
+        if (isBranch(current) && isExpanded(current)) {
+          collapse(current)
+        } else {
+          const parent = parentItem(current)
+          if (parent) setFocus(parent)
+        }
+        break
+      case 'Home': {
+        const vis = visibleItems()
+        if (vis[0]) setFocus(vis[0])
+        break
+      }
+      case 'End': {
+        const vis = visibleItems()
+        if (vis.length) setFocus(vis[vis.length - 1])
+        break
+      }
+      case 'Enter':
+      case ' ':
+        select(current)
+        if (isBranch(current)) {
+          isExpanded(current) ? collapse(current) : expand(current)
+        }
+        break
+      default:
+        handled = false
+    }
+
+    if (handled) {
+      e.preventDefault()
+      e.stopPropagation()
+    }
+  })
+
+  // ---- Click handler ----
+  // 只處理點擊在 .tree-view__label 上的事件，避免點擊巢狀子群組
+  // （ul[role="group"]）的縮排空白處或外邊距時，向上誤判為父節點 li。
+  tree.addEventListener('click', (e) => {
+    const label = e.target.closest('.tree-view__label')
+    if (!label || !tree.contains(label)) return
+
+    const current = label.closest('[role="treeitem"]')
+    if (!current) return
+
+    setFocus(current)
+    select(current)
+
+    // Toggle expand/collapse for branch nodes
+    if (isBranch(current)) {
+      isExpanded(current) ? collapse(current) : expand(current)
+    }
+  })
+}