npm package: @liha-css/reset
Description: `@liha-css/reset` は **Void Reset（全破壊型リセットCSS）** を配布します。 ブラウザ標準の見た目（margin / padding / font-size / font-weight / list marker / form UI …）を **ほぼすべて消し飛ばし**、アプリ側でゼロから再構築する前提です。
Latest version: 0.0.0

## `@liha-css/reset`

`@liha-css/reset` は **Void Reset（全破壊型リセットCSS）** を配布します。
ブラウザ標準の見た目（margin / padding / font-size / font-weight / list marker / form UI …）を **ほぼすべて消し飛ばし**、アプリ側でゼロから再構築する前提です。

> 「デザインをこだわるなら、創造し直す」思想。
> ただし **アクセシビリティの生命線（focus）** と、**Safariの事故** だけは最低限守ります。

### What it does

- `all: unset` で **ほぼすべてのUAスタイルをリセット**
- `:where()` で詳細度を 0 にし、利用側のCSSで上書きしやすくする
- `display: revert` で **レイアウト崩壊を防止**
- `html/body` は “世界の床” として最低限のブロック化だけ復帰
- a11y: `:focus / :focus-visible` のフォーカス可視化を確保
- Safari/iOS: **勝手な文字拡大** と **タップ時ハイライト** を抑制
- motion: `prefers-reduced-motion` を尊重

### Important notes (Read this)

- **見た目は全部プレーンになります**
  - `h1` / `strong` / `em` / `ul` / `button` などの **意味はHTMLに残る** 一方で、見た目は “ただのテキスト” に寄ります。
- **フォームは “見た目ゼロ”**
  - `appearance` を戻さない方針のため、`checkbox` / `radio` / `select` を含め、見た目は基本的に自作前提です。
- **サードパーティUIは崩れる可能性があります**
  - Stripe / Maps / 埋め込み系は、reset が内部DOMまで影響する場合があります（escape hatch を用意すると運用が楽です）。

---

### Install

```bash
pnpm add @liha-css/reset
# or npm i @liha-css/reset
# or yarn add @liha-css/reset
````

### Usage

> `@layer liha.reset` で定義されます。
> `tokens` と併用する場合は、基本的に **tokens → reset → app** の順で読み込むのを推奨します。

```ts
import '@liha-css/reset'
```

---

## CSS

```css
@layer liha.reset {
  /* 1) 全破壊: html/body も含める */
  *:where(
      :not(
          iframe,
          canvas,
          img,
          svg,
          video,
          audio,
          dialog,
          details,
          summary,
          progress,
          meter
        )
        :not(svg *, symbol *)
    ),
  *::before,
  *::after {
    all: unset;
    display: revert;
    box-sizing: border-box;
  }

  /* 2) html/body は “世界の床” なので、床だけ戻す */
  :where(html, body) {
    display: block;
    margin: 0;
    padding: 0;
  }

  :where(html) {
    /* レイアウトの基準を安定させる */
    block-size: 100%;

    /* Safari/iOS: 勝手な文字拡大を防ぐ（事故防止） */
    -webkit-text-size-adjust: 100%;

    /* Safari/iOS: タップ時の灰色ハイライトを消す */
    -webkit-tap-highlight-color: transparent;
  }

  :where(body) {
    min-block-size: 100%;
  }

  /* 3) フォーム: 見た目はゼロ、文字だけは継承 */
  :where(input, select, textarea, button) {
    font: inherit;
    color: inherit;
  }

  /* 4) メディア */
  :where(img, video, iframe, canvas, svg) {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* 5) リストマーカーも全破壊 */
  :where(ol, ul) {
    list-style: none;
  }

  /* 5.5) table の挙動を最低限安定化 */
  :where(table) {
    border-collapse: collapse;
  }

  /* 6) a11y: Forced Colors */
  @media (forced-colors: active) {
    :where(*) {
      forced-color-adjust: auto;
    }
    :where(:focus) {
      outline: 2px solid CanvasText;
      outline-offset: 2px;
    }
  }

  /* 7) a11y: フォーカス可視化（Safariフォールバック込み） */
  :where(:focus) {
    outline: 2px solid var(--liha-color-focus-ring, currentColor);
    outline-offset: 2px;
  }
  :where(:focus:not(:focus-visible)) {
    outline: none;
  }

  /* 8) motion */
  @media (prefers-reduced-motion: reduce) {
    :where(*, *::before, *::after) {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* 9) hidden */
  [hidden] {
    display: none !important;
  }
}
```

---

## Recommended pairings

* `@liha-css/tokens`

  * reset 後に “意味のある値” を当てるための材料（色 / radius / shadow / z-index）を提供します。

---

## Escape hatch (optional)

サードパーティUI（Stripeなど）で「reset を当てたくない領域」がある場合は、回避用クラスを用意すると運用が楽です。

```css
/* app側で定義する例 */
.liha-revert-scope {
  all: revert-layer;
}
```

---

## Browser support

* Modern browsers only
* CSS Cascade Layers（`@layer`）に依存します
* Safari/iOS の最小パッチ（`-webkit-text-size-adjust`, `-webkit-tap-highlight-color`）を含みます