### Install Dependencies with npm

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/README.md

Installs project dependencies using npm. Run this after cloning the repository.

```bash
npm install
```

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

### Start Storybook for Component Preview

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/README.md

Starts the Storybook server to preview components. Access it at http://localhost:6006.

```bash
npm run storybook
```

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

### Invoker Commands API Polyfill Installation

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/drawer/drawer.mdx

Commands to download or install the Invoker Commands API polyfill.

```bash
curl -LO https://unpkg.com/invokers-polyfill/invoker.min.js
```

```sh
npm install invokers-polyfill
```

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

### Custom Element Implementation Example

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/docs/development-policy.mdx

This example demonstrates the basic structure of a Custom Element, including connected and disconnected callbacks for managing event listeners and a method to open a calendar. It utilizes a helper function for event subscription.

```jsx
class DatePicker extends HTMLElement {
  // ...
  connectedCallback() {
    this.subscriptions = [
	  this.subscribe(this.calendarButton, "click", () => this.openCalendar()),
    ]; 
  }
  disconnectedCallback() {
    this.subscriptions.forEach((subscription) => subscription.remove());
  }
  openCalendar() {
    // ...
  }
  get calendarButton() {
    return this.querySelector("[data-date-picker-calendar-button]");
  }
}

function subscribe(el, ...args) {
  el.addEventListener(...args);
  return { remove: () => el.removeEventListener(...args) };
}

customElements.define("dads-date-picker", DatePicker);
```

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

### Component Installation

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/menu-list-box/menu-list-box.mdx

Include the required CSS and JavaScript files. Ensure the script is loaded as an ES Module.

```html
<link rel="stylesheet" href="menu-list.css">
<link rel="stylesheet" href="menu-list-box.css">
<script type="module" src="menu-list-box.js"></script>
```

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

### Indicate Current Language Example

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/language-selector/language-selector.mdx

Example of how to mark the currently selected language in the menu list. This uses `aria-current="true"` and `data-current` attributes to display a checkmark icon.

```html
<a class="dads-menu-list__item" href="#" lang="ja" hreflang="ja" data-type="box" data-size="regular" data-current aria-current="true">
  <!-- チェックマークアイコン -->
  <span class="dads-menu-list__label">日本語</span>
</a>
```

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

### JavaScript API Usage

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/progress-indicator/progress-indicator.mdx

Comprehensive example of controlling the component and accessing its properties.

```javascript
const progress = document.querySelector('dads-progress-indicator');

// ローディング開始
progress.start();

// ローディング停止
progress.stop();

// 進捗率の設定（0〜100）
progress.value = 50;

// 進捗率の取得
console.log(progress.value); // 50

// アクティブ状態の確認
console.log(progress.active); // true
```

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

### Utility Link with Icon

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/utility-link/utility-link.mdx

Example of a utility link with a lead icon. The SVG for the icon should be included as shown.

```html
<!-- アイコンあり -->
<a class="dads-utility-link" href="#">
  <svg class="dads-utility-link__lead-icon" ... aria-hidden="true">...</svg>
  <span class="dads-utility-link__label">リンクテキスト</span>
</a>
```

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

### Control Loading Dynamically

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/progress-indicator/progress-indicator.mdx

Use JavaScript methods to start or stop the loading indicator.

```javascript
const progress = document.querySelector('dads-progress-indicator');

// ローディング開始
progress.start();

// ローディング停止
progress.stop();
```

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

### Implement Nested List

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/list/list.mdx

Example of nesting lists within list items while maintaining spacing attributes.

```html
<ul class="dads-list" data-spacing="4">
  <li>
    親アイテム
    <ul class="dads-list" data-spacing="4">
      <li>子アイテム1</li>
      <li>子アイテム2</li>
    </ul>
  </li>
</ul>
```

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

### Utility Link without Icon

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/utility-link/utility-link.mdx

Example of a utility link implemented without a lead icon. This is useful when only text is needed.

```html
<!-- アイコンなし -->
<a class="dads-utility-link" href="#">
  <span class="dads-utility-link__label">リンクテキスト</span>
</a>
```

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

### Start Loop Progress Indicator

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/progress-indicator/interactive-demo.html

Initiates an indeterminate progress indicator that runs for 15 seconds. It announces loading status every 5 seconds.

```javascript
// Loop タイプのデモ
const loopStartBtn = document.getElementById('demo-loop-start');
const loopProgress = document.getElementById('demo-loop-progress');
let loopTimer = 0;
loopStartBtn?.addEventListener('click', () => {
    clearTimeout(loopTimer);
    loopProgress.stop();
    loopProgress.start();
    loopTimer = setTimeout(() => {
        loopProgress.stop();
    }, 15000);
});
```

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

### Initialize Loading State

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/progress-indicator/progress-indicator.mdx

Use the active attribute to start the loading state immediately upon page load.

```html
<dads-progress-indicator class="dads-progress-indicator" data-type="stacked" intent="passive" active>
  <!-- ... -->
</dads-progress-indicator>
```

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

### Menu Item Element Usage

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/menu-list/menu-list.mdx

Examples demonstrating the use of `<a>` for navigation links and `<button>` for actions within a menu list item. Choose the appropriate element based on the item's function.

```html
<!-- リンクの場合 -->
<a class="dads-menu-list__item" href="/page" data-type="standard" data-size="regular">
  <span class="dads-menu-list__label">ページへ移動</span>
</a>

<!-- ボタンの場合 -->
<button class="dads-menu-list__item" type="button" data-type="standard" data-size="regular">
  <span class="dads-menu-list__label">アクションを実行</span>
</button>
```

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

### Start Fill Progress Indicator

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/progress-indicator/interactive-demo.html

Initiates a determinate progress indicator that fills to 100% over 15 seconds. Progress updates are announced every 5 seconds.

```javascript
// Fill タイプのデモ
const fillStartBtn = document.getElementById('demo-fill-start');
const fillProgress = document.getElementById('demo-fill-progress');
let fillTimer = 0;
const DURATION = 15000;
const INTERVAL = 200;
const STEPS = DURATION / INTERVAL;
fillStartBtn?.addEventListener('click', () => {
    clearInterval(fillTimer);
    fillProgress.stop();
    fillProgress.value = 0;
    fillProgress.start();
    let currentStep = 0;
    fillTimer = setInterval(() => {
        currentStep++;
        const progress = Math.min(100, Math.round((currentStep / STEPS) * 100));
        fillProgress.value = progress;
        if (progress >= 100) {
            clearInterval(fillTimer);
            fillProgress.stop();
        }
    }, INTERVAL);
});
```

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

### Textarea with Character Counter Integration

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/textarea/textarea.mdx

Example demonstrating the integration of the Textarea with the custom element 'dads-textarea-counter' to manage character limits and provide feedback.

```html
<div class="dads-form-control-label" data-size="md">
  <label class="dads-form-control-label__label" for="counter-textarea">
    ラベル
    <span class="dads-form-control-label__requirement" data-required="true">※必須</span>
  </label>
  <p id="counter-support-text" class="dads-form-control-label__support-text">20文字以内で入力してください</p>
  <div>
    <span class="dads-textarea">
      <textarea id="counter-textarea" class="dads-textarea__textarea" aria-describedby="counter-support-text"></textarea>
      <dads-textarea-counter class="dads-textarea__counter" for="counter-textarea" max="20"></dads-textarea-counter>
    </span>
  </div>
</div>
```

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

### Start Passive Progress Indicator

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/progress-indicator/interactive-demo.html

Initiates a passive progress indicator that completes automatically after 5 seconds without screen reader notifications.

```javascript
// Passive タイプのデモ
const passiveStartBtn = document.getElementById('demo-passive-start');
const passiveProgress = document.getElementById('demo-passive-progress');
let passiveTimer = 0;
passiveStartBtn?.addEventListener('click', () => {
    clearTimeout(passiveTimer);
    passiveProgress.stop();
    passiveProgress.start();
    passiveTimer = setTimeout(() => {
        passiveProgress.stop();
    }, 5000);
});
```

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

### Semantic Table Markup with Scope Attributes

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/table/table.mdx

This example shows a semantically correct HTML table structure for displaying course data. It uses `<th>` with `scope="col"` for column headers and `scope="row"` for row headers to improve accessibility.

```html
<div class="dads-table">
  <table class="dads-table__table">
    <thead>
      <tr>
        <th class="dads-table__col-header" scope="col">コース名</th>
        <th class="dads-table__col-header" scope="col">受講者数</th>
        <th class="dads-table__col-header" scope="col">出席率</th>
        <th class="dads-table__col-header" scope="col">平均点</th></tr>
    </thead>
    <tbody>
      <tr>
        <th class="dads-table__row-header" scope="row">基礎コース</th>
        <td>150</td><td>92%</td><td>78</td>
      </tr>
      <tr>
        <th class="dads-table__row-header" scope="row">応用コース</th>
        <td>120</td><td>88%</td><td>75</td>
      </tr>
      <tr>
        <th class="dads-table__row-header" scope="row">専門コース</th>
        <td>90</td><td>95%</td><td>82</td>
      </tr>
    </tbody>
  </table>
</div>
```

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

### Card Example 2: Card with Action Buttons

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/card/card.mdx

This CSS is for a card featuring a vertical ellipsis button and a 'Learn More' link in the main content area. The image area is positioned to the left using grid layout.

```css
/* Card Example 2 CSS */
.card {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-image-container {
  grid-column: 1 / 2;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-content {
  grid-column: 2 / 3;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-title {
  font-size: 1.25em;
  margin-bottom: 8px;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.card-actions a {
  text-decoration: none;
  color: #007bff;
}

.card-actions button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.card-actions svg {
  width: 20px;
  height: 20px;
  fill: #555;
}
```

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

### Card Example 4: Grid Layout with Actions

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/card/card.mdx

This CSS configures a card using a grid layout, featuring a vertical ellipsis button and action links. It utilizes the button component for actions.

```css
/* Card Example 4 CSS */
.card {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-image-container {
  grid-row: 1 / 2;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-title {
  font-size: 1.25em;
  margin-bottom: 8px;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.card-actions a {
  text-decoration: none;
  color: #007bff;
}

.card-actions button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.card-actions svg {
  width: 20px;
  height: 20px;
  fill: #555;
}
```

```css
/* button.css */
.button {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  cursor: pointer;
  font-size: 1em;
}

.button:hover {
  background-color: #0056b3;
}

.button-secondary {
  background-color: #6c757d;
}

.button-secondary:hover {
  background-color: #5a6268;
}
```

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

### Build Storybook for Production

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/README.md

Builds the Storybook for production deployment.

```bash
npm run build-storybook
```

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

### Carousel HTML Structure

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/carousel/carousel.mdx

The HTML structure for the carousel component. This example demonstrates a carousel with a breakpoint at 1024px container width, where each slide is 696px wide. Refer to the Storybook stories for interactive examples.

```html
<div class="border-image">
  <img src={carousel1024} srcSet={`${carousel1024At2x} 2x`} alt="Normalカルーセルのスクリーンショット" width="768" height="320" style={{ maxWidth: '100%', height: 'auto' }} />
</div>
```

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

### Run Tests

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/README.md

Executes the project's test suite.

```bash
npm test
```

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

### Icon-less Chip Label

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/chip-label/chip-label.mdx

Usage example for a chip label without an icon.

```html
<span class="dads-chip-label" data-style="text" data-color="gray">
  ラベル
</span>
```

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

### Textarea Component - Readonly State

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/textarea/textarea.mdx

Example of setting the Textarea component to a read-only state.

```APIDOC
## Textarea Readonly State

### Description

Illustrates how to make the textarea read-only using the `readonly` attribute. This includes updating the associated label to indicate the non-editable status.

### Method

N/A (HTML Structure)

### Endpoint

N/A (HTML Structure)

### Request Body

N/A

### Request Example

```html
<div class="dads-form-control-label" data-size="md">
  <label class="dads-form-control-label__label" for="readonly-textarea">
    ラベル
    <span class="dads-form-control-label__status">編集不可</span>
  </label>
  <p id="readonly-support-text" class="dads-form-control-label__support-text">編集できない理由が入ります。</p>
  <div>
    <span class="dads-textarea">
      <textarea id="readonly-textarea" class="dads-textarea__textarea" readonly aria-describedby="readonly-support-text">入力されたテキスト</textarea>
    </span>
  </div>
</div>
```

### Response

N/A (HTML Structure)
```

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

### Accessible Drawer Markup

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/drawer/drawer.mdx

Example of using aria-labelledby to provide an accessible name for the dialog element.

```html
<dialog id="dads-drawer" class="dads-drawer" data-placement="right" aria-labelledby="dads-drawer-heading">
  <h2 id="dads-drawer-heading" class="dads-u-visually-hidden">メニュー</h2>
  ...
</dialog>
```

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

### CSS 強制カラーモード対応

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/docs/development-policy.mdx

強制カラーモード（Windowsのコントラストテーマなど）に対するスタイルの調整を行う例です。

```css
@media (forced-colors: active) {
  .dads-button[data-type="solid-fill"]:disabled {
    border-color: GrayText;
    color: GrayText;
  }
}
```

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

### ウェブコンポーネントの読み込みと配置

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/docs/getting-started.mdx

JavaScriptモジュールを読み込み、カスタム要素をHTMLに配置してインタラクティブな機能を利用します。

```html
<script type="module" src="path/to/components/date-picker/date-picker.js"></script>
<dads-date-picker>
  <!-- 日付ピッカーの内容 -->
</dads-date-picker>
```

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

### Initialize Step Navigation Variants

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/step-navigation/playground-full.html

Clones the base step navigation element to create small and vertical variants programmatically.

```javascript
const horizontal = document.querySelector('.dads-step-navigation'); const small = horizontal.cloneNode(true); small.setAttribute('data-size', 'small'); document.body.appendChild(small); const vertical = horizontal.cloneNode(true); vertical.setAttribute('data-orientation', 'vertical'); document.body.appendChild(vertical); const verticalSmall = horizontal.cloneNode(true); verticalSmall.setAttribute('data-orientation', 'vertical'); verticalSmall.setAttribute('data-size', 'small'); document.body.appendChild(verticalSmall);
```

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

### Custom Color Chip Label

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/chip-label/chip-label.mdx

Example of overriding chip label colors using CSS custom properties.

```html
<span class="dads-chip-label" data-style="filled-outline" style="
  --_non-text: #854f91;
  --_bg: #f4dff9;
  --_text-dark: #72447d;
">
  <svg class="dads-chip-label__icon" width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" aria-hidden="true">
    <path d="M4.6 20.5c-.5-.1-1-.6-1.1-1l16-16c.5.1.9.6 1 1l-16 16Zm-1.1-6.4v-2L12 3.4h2.1L3.5 14.1Zm0-7.4V5.3c0-1 .8-1.8 1.8-1.8h1.4L3.5 6.7Zm13.8 13.8 3.2-3.2v1.4c0 1-.8 1.8-1.8 1.8h-1.4Zm-7.4 0L20.5 9.9v2L12 20.6H9.9Z"/>
  </svg>
  ラベル
</span>
```

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

### Format Code

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/README.md

Applies code formatting rules to the project files.

```bash
npm run format
```

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

### Textarea Component - With Form Control Label

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/textarea/textarea.mdx

Example of integrating the Textarea component with a Form Control Label for accessibility and usability.

```APIDOC
## Textarea with Form Control Label

### Description

Demonstrates how to associate a label and support text with the textarea using the Form Control Label component for better accessibility and user experience.

### Method

N/A (HTML Structure)

### Endpoint

N/A (HTML Structure)

### Parameters

#### Path Parameters

N/A

#### Query Parameters

N/A

#### Request Body

N/A

### Request Example

```html
<div class="dads-form-control-label" data-size="md">
  <label class="dads-form-control-label__label" for="comment-textarea">
    ラベル
    <span class="dads-form-control-label__requirement" data-required="true">※必須</span>
  </label>
  <p id="comment-support-text" class="dads-form-control-label__support-text">サポートテキスト</p>
  <div>
    <span class="dads-textarea">
      <textarea id="comment-textarea" class="dads-textarea__textarea" aria-describedby="comment-support-text"></textarea>
    </span>
  </div>
</div>
```

### Response

N/A (HTML Structure)
```

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

### Textarea with Form Control Label

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/textarea/textarea.mdx

Example of associating a Textarea with a label using the 'for' attribute and displaying support text.

```html
<div class="dads-form-control-label" data-size="md">
  <label class="dads-form-control-label__label" for="comment-textarea">
    ラベル
    <span class="dads-form-control-label__requirement" data-required="true">※必須</span>
  </label>
  <p id="comment-support-text" class="dads-form-control-label__support-text">サポートテキスト</p>
  <div>
    <span class="dads-textarea">
      <textarea id="comment-textarea" class="dads-textarea__textarea" aria-describedby="comment-support-text"></textarea>
    </span>
  </div>
</div>
```

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

### コンポーネントCSSの読み込み

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/docs/getting-started.mdx

個別のコンポーネントCSSファイルをHTMLに追加します。

```html
<!-- 例：ボタンコンポーネントを使用する場合 -->
<link rel="stylesheet" href="path/to/components/button/button.css">
```

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

### Component Styles and Logic

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/file-upload/file-upload.mdx

CSS and JavaScript files required for the component functionality.

```css
{fileUploadCss}
```

```javascript
{fileUploadJs}
```

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

### Current Item Indication

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/menu-list/menu-list.mdx

Example of marking the current menu item using the `data-current` attribute. This attribute is for visual styling only.

```html
<a class="dads-menu-list__item" href="/current-page" data-type="standard" data-size="regular" data-current>
  <span class="dads-menu-list__label">現在のページ</span>
</a>
```

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

### Divider Component - div Element Usage

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/divider/divider.mdx

Example of using the div element for decorative horizontal lines, shown before a heading.

```html
<div class="dads-divider" data-color="solid-gray-420" data-style="solid" data-width="1"></div>
<h2>見出し</h2>
```

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

### Divider Component - hr Element Usage

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/divider/divider.mdx

Example of using the hr element for thematic breaks, including preceding and succeeding content.

```html
<p>前のトピックに関する内容...</p>
<hr class="dads-divider" data-color="solid-gray-420" data-style="solid" data-width="1" />
<p>次のトピックに関する内容...</p>
```

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

### Multi-step Form: Step 1 - Initial File Selection

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/file-upload/file-upload.mdx

In a multi-step form, the component automatically adds selected files as `<input type="file">` elements within list items. This ensures file data is submitted when the form is sent.

```html
<form action="/step1" method="post" enctype="multipart/form-data">
  <dads-file-upload class="dads-file-upload" max-files="3">
    <input
      class="dads-file-upload__input"
      type="file"
      name="upload_files"
      multiple
      data-js-input
    >
    <!-- 他の要素は省略 -->
  </dads-file-upload>
  <button type="submit">次へ</button>
</form>
```

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

### Read-only Textarea

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/textarea/textarea.mdx

Example of a Textarea in a read-only state using the 'readonly' attribute. Includes label and support text for indicating non-editable status.

```html
<div class="dads-form-control-label" data-size="md">
  <label class="dads-form-control-label__label" for="readonly-textarea">
    ラベル
    <span class="dads-form-control-label__status">編集不可</span>
  </label>
  <p id="readonly-support-text" class="dads-form-control-label__support-text">編集できない理由が入ります。</p>
  <div>
    <span class="dads-textarea">
      <textarea id="readonly-textarea" class="dads-textarea__textarea" readonly aria-describedby="readonly-support-text">入力されたテキスト</textarea>
    </span>
  </div>
</div>
```

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

### デザイントークンのカスタムプロパティ定義

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/docs/getting-started.mdx

プロジェクトのCSSに追加して、デザインシステムの共通カラーパレットを定義します。

```css
:root {
  --color-primitive-blue-50: #e8f1fe;
  --color-primitive-blue-100: #d9e6ff;
  --color-primitive-blue-200: #c5d7fb;
  /* その他のカスタムプロパティ... */
}
```

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

### Invoker Commands API Polyfill Usage

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/drawer/drawer.mdx

Methods for including the polyfill in a project via script tag or module import.

```html
<script src="path/to/invoker.min.js"></script>
```

```js
import "invokers-polyfill";
```

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

### CSS セレクタ詳細度管理例

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/docs/development-policy.mdx

クラス名セレクタの使用を推奨し、IDセレクタや要素セレクタの使用を避ける例です。詳細度は最小限に抑えますが、過剰な努力は避けます。

```css
/* 🙆 DO */
.dads-button[data-type="solid-fill"]:hover {
  background-color: var(--dads-button-hover-color);
  text-decoration: underline;
}

/* 🙅 DON'T: 抽象的で複雑 */
.dads-button {
  background-color: var(--dads-button-bg-color);
  text-decoration: var(--dads-button-text-decoration);
}
.dads-button[data-type="solid-fill"]:hover {
  --dads-button-bg-color: var(--color-primitive-blue-1000);
  --dads-button-text-decoration: underline;
}

/* 🙅 DON'T: 広く普及していない */
.dads-button:where([data-type="solid-fill"]:hover) {
  background-color: var(--dads-button-hover-color);
  text-decoration: underline;
}
```

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

### Minimalist Step Navigation

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/step-navigation/step-navigation.mdx

Display steps using only the number, omitting titles and descriptions.

```html
<li class="dads-step-navigation__step" data-state="reached" data-first aria-current="true">
  <span class="dads-step-navigation__header">
    <span class="dads-u-visually-hidden">ステップ</span>
    <span class="dads-step-navigation__number">1</span>
  </span>
</li>
```

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

### Customizing Character Counter Messages

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/textarea/textarea.mdx

Example of customizing the messages for the character counter, including error and announcement messages, for different languages or specific UI requirements.

```html
<dads-textarea-counter
  class="dads-textarea__counter"
  for="my-textarea"
  max="100"
  data-error-exceeded="{count} characters exceeded."
  data-announce-exceeded="{count} characters exceeded."
  data-announce-remaining="{count} characters remaining."
></dads-textarea-counter>
```

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

### Select with Associated Label

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/select/select.mdx

Example demonstrating how to associate a select component with a form control label. Ensure the `for` attribute of the label matches the `id` of the select element.

```html
<div class="dads-form-control-label" data-size="md">
  <label class="dads-form-control-label__label" for="area-select">
    東京23区
    <span class="dads-form-control-label__requirement" data-required="true">※必須</span>
  </label>
  <p id="area-support-text" class="dads-form-control-label__support-text">該当する区を選択してください。</p>
  <div>
    <span class="dads-select">
      <span class="dads-select__control">
        <select id="area-select" class="dads-select__select" data-size="md" aria-describedby="area-support-text">
          <option value="">選択してください</option>
          <option value="1">足立区</option>
          <option value="2">荒川区</option>
          <option value="3">板橋区</option>
        </select>
        <svg class="dads-select__chevron" width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 17L3 8L4 7L12 15L20 7L21 8L12 17Z" fill="currentcolor"/>
        </svg>
      </span>
    </span>
  </div>
</div>
```

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

### Link Button with New Tab Icon

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/emergency-banner/emergency-banner.mdx

An example of a link button within the emergency banner that opens in a new tab. Includes an icon and accessibility attributes.

```html
<a class="dads-emergency-banner__button" href="#" target="_blank">
  指定避難所を確認する
  <span class="dads-emergency-banner__button-icon">
    <svg class="dads-emergency-banner__button-icon-glyph" width="16" height="16" viewBox="0 0 48 48" role="img" aria-label="新規タブで開きます"><path d="M22 6V9H9V39H39V26H42V42H6V6H22ZM42 6V20H39V11.2L21 29L19 27L36.8 9H28V6H42Z" fill="currentcolor"/></svg>
  </span>
</a>
```

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

### Implement Action Button

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/resource-list/resource-list.mdx

Use this structure for action buttons like menus or downloads. Ensure the SVG icon includes role="img" and an aria-label for accessibility.

```html
<button class="dads-resource-list__action-button">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" role="img" aria-label="メニュー">
    <!-- アイコンのpath -->
  </svg>
</button>
```

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

### Icon-enabled Chip Label

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/chip-label/chip-label.mdx

Usage example for a chip label including an icon. Ensure the SVG element has the .dads-chip-label__icon class and aria-hidden="true".

```html
<span class="dads-chip-label" data-style="text" data-color="gray">
  <svg class="dads-chip-label__icon" width="24" height="24" viewBox="0 0 24 24" fill="currentcolor" aria-hidden="true">
    <!-- アイコンのパス -->
  </svg>
  ラベル
</span>
```

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

### Interactive Step Navigation

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/step-navigation/step-navigation.mdx

Implement navigation steps as links or buttons to allow users to return to previous steps.

```html
<nav class="dads-step-navigation" ... aria-label="ステップ">
  <ul>
    <li class="dads-step-navigation__step" data-state="completed">
      <a class="dads-step-navigation__header" href="#">
        ...
      </a>
    </li>
  </ul>
</nav>
```

```html
<div class="dads-step-navigation" ...>
  <ul>
    <li class="dads-step-navigation__step" data-state="completed">
      <button class="dads-step-navigation__header" type="button">
        ...
      </button>
    </li>
  </ul>
</div>
```

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

### Card Example 1: Full-width Link Card

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/card/card.mdx

Use this CSS for a card where the entire component is a clickable link. The main content area has rounded corners.

```css
/* Card Example 1 CSS */
.card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card a {
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
  height: 100%;
}

.card-image {
  background: linear-gradient(to right, #8364e2, #42307d);
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-image svg {
  width: 80px;
  height: 80px;
  fill: #fff;
}

.card-content {
  padding: 16px;
}

.card-title {
  font-size: 1.25em;
  margin-bottom: 8px;
}

.card-description {
  color: #555;
}
```

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

### Implement Linked List Item

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/list/list.mdx

Structure for creating a list item that acts as a link.

```html
<li><a class="dads-link" href="#"><span>3. </span><span>リンク付きアイテム</span></a></li>
```

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

### Resource List Link Implementation

Source: https://github.com/digital-go-jp/design-system-example-components-html/blob/main/src/components/resource-list/resource-list.mdx

Methods for making the title or the entire row clickable.

```html
<h2 class="dads-resource-list__title">
  <a href="#">リストタイトル</a>
</h2>
```

```html
<a class="dads-resource-list__body" href="#">
  <div class="dads-resource-list__contents">
    <h2 class="dads-resource-list__title">リストタイトル</h2>
    <!-- 他のコンテンツ -->
  </div>
</a>
```