zfb
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

操作

カーソル、ポインター、選択、リサイズ、アクセント色の動作を設定します。

ネイティブコントロールの周辺にあるブラウザー動作を調整します。アクセント色、ポインターの対象、カーソル表示、サイズ変更、テキスト選択を指定できます。意味のある HTML やラベルの代わりにはなりません。

クラスと CSS の早見表

クラスの例期待される宣言
accent-brandaccent-color: var(--zw-color-brand);
cursor-pointercursor: pointer;
pointer-events-nonepointer-events: none;
resize-yresize: vertical;
select-alluser-select: all;
appearance-autoappearance: auto;
appearance-noneappearance: none;
例の設定

すべてのプレビューで spec: 1、reset: "none"、strict モード、spacingUnit: "0.25rem"、空のブレークポイント、defaultTransitionTimingFunction: "ease" を明示します。設定例ではチェックボックスのアクセント用に tokens.colors.brand を定義します。チェックボックス、ボタン、検索入力欄、コード文字列、テキストエリアは、標準のキーボード操作とポインター操作を保ちます。

使い方の例

実際の設定フォームを整える

ラベル付きチェックボックスに accent-brand を使い、二つのネイティブボタンで通常と not-allowed のカーソルを示します。利用不可のボタンには disabled も指定します。

実際の設定フォームを整える
HTML
<fieldset class="wind-demo-form"><legend>Preferences</legend><label><input type="checkbox" checked class="accent-brand"> Enable email updates</label><button type="button" class="wind-demo-button cursor-pointer">Save preferences</button><button type="button" disabled class="wind-demo-button cursor-not-allowed">Unavailable while saving</button></fieldset>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-color-brand: #0f766e;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.2rem;
  max-width: 35rem;
  padding: 1rem;
  border: 1px solid #a7bacd;
  color: #24364b;
  font: 15px / 1.5 system-ui, sans-serif;
}

.wind-demo-form legend {
  padding: 0 .35rem;
  font-weight: 650;
}

.wind-demo-form label {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.wind-demo-button {
  border: 1px solid #526477;
  border-radius: .35rem;
  background: #eef3f8;
  padding: .55rem .75rem;
  color: inherit;
  font: inherit;
}

.wind-demo-button:focus-visible {
  outline: 3px solid #1670b8;
  outline-offset: 3px;
}
.accent-brand {
  accent-color: var(--zw-color-brand);
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "colors": {
        "brand": "#0f766e"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-form": true,
      "wind-demo-button": true
    },
    "safelist": {
      "docs-preview": [
        "accent-brand",
        "cursor-pointer",
        "cursor-not-allowed"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; max-width: 35rem; padding: 1rem; border: 1px solid #a7bacd; color: #24364b; font: 15px/1.5 system-ui, sans-serif; }
.wind-demo-form legend { padding: 0 0.35rem; font-weight: 650; }
.wind-demo-form label { display: inline-flex; align-items: center; gap: 0.45rem; }
.wind-demo-button { border: 1px solid #526477; border-radius: 0.35rem; background: #eef3f8; padding: 0.55rem 0.75rem; color: inherit; font: inherit; }
.wind-demo-button:focus-visible { outline: 3px solid #1670b8; outline-offset: 3px; }

装飾を通してクリックを届ける

pointer-events-none を検索アイコンに指定し、アイコンではなくラベル付き入力欄がクリックを受け取るようにします。

装飾を通してクリックを届ける
HTML
<label class="wind-demo-search"><span class="wind-demo-label">Search</span><span class="wind-demo-searchbox"><span class="wind-demo-search-icon pointer-events-none" aria-hidden="true">⌕</span><input type="search" value="motion utilities" class="wind-demo-search-input"></span></label>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-search {
  display: grid;
  gap: .35rem;
  width: min(24rem, 100%);
  color: #24364b;
  font: 15px / 1.5 system-ui, sans-serif;
}

.wind-demo-searchbox {
  position: relative;
}

.wind-demo-search-icon {
  position: absolute;
  left: .7rem;
  top: .35rem;
  color: #526477;
  font-size: 1.5rem;
  line-height: 1;
}

.wind-demo-search-input {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #849bb3;
  border-radius: .35rem;
  padding: .55rem .75rem .55rem 2.3rem;
  color: inherit;
  font: inherit;
}

.wind-demo-search-input:focus-visible {
  outline: 3px solid #1670b8;
  outline-offset: 2px;
}
.pointer-events-none {
  pointer-events: none;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-search": true,
      "wind-demo-label": true,
      "wind-demo-searchbox": true,
      "wind-demo-search-icon": true,
      "wind-demo-search-input": true
    },
    "safelist": {
      "docs-preview": [
        "pointer-events-none"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-search { display: grid; gap: 0.35rem; width: min(24rem, 100%); color: #24364b; font: 15px/1.5 system-ui, sans-serif; }
.wind-demo-searchbox { position: relative; }
.wind-demo-search-icon { position: absolute; left: 0.7rem; top: 0.35rem; color: #526477; font-size: 1.5rem; line-height: 1; }
.wind-demo-search-input { box-sizing: border-box; width: 100%; border: 1px solid #849bb3; border-radius: 0.35rem; padding: 0.55rem 0.75rem 0.55rem 2.3rem; color: inherit; font: inherit; }
.wind-demo-search-input:focus-visible { outline: 3px solid #1670b8; outline-offset: 2px; }

コマンド全体を選択してメモ欄を広げる

select-all はクリックでコマンド全文を選択し、resize-y はネイティブのテキストエリアに垂直方向のサイズ変更を追加します。

コマンド全体を選択してメモ欄を広げる
HTML
<div class="wind-demo-tools"><p>Click the command to select it in full: <code class="wind-demo-code select-all">pnpm --filter docs check</code></p><label class="wind-demo-note">Scratch notes<textarea class="wind-demo-textarea resize-y">You can resize this field vertically.</textarea></label></div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-tools {
  display: grid;
  gap: .8rem;
  max-width: 34rem;
  color: #24364b;
  font: 15px / 1.5 system-ui, sans-serif;
}

.wind-demo-tools p {
  margin: 0;
}

.wind-demo-code {
  display: inline-block;
  border: 1px solid #a7bacd;
  border-radius: .25rem;
  background: #f2f6fa;
  padding: .2rem .45rem;
  font: .9em / 1.5 ui-monospace, monospace;
}

.wind-demo-note {
  display: grid;
  gap: .3rem;
}

.wind-demo-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 4rem;
  border: 1px solid #849bb3;
  border-radius: .35rem;
  padding: .55rem;
  color: inherit;
  font: inherit;
}

.wind-demo-textarea:focus-visible {
  outline: 3px solid #1670b8;
  outline-offset: 2px;
}
.resize-y {
  resize: vertical;
}
.select-all {
  user-select: all;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-tools": true,
      "wind-demo-code": true,
      "wind-demo-note": true,
      "wind-demo-textarea": true
    },
    "safelist": {
      "docs-preview": [
        "select-all",
        "resize-y"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-tools { display: grid; gap: 0.8rem; max-width: 34rem; color: #24364b; font: 15px/1.5 system-ui, sans-serif; }
.wind-demo-tools p { margin: 0; }
.wind-demo-code { display: inline-block; border: 1px solid #a7bacd; border-radius: 0.25rem; background: #f2f6fa; padding: 0.2rem 0.45rem; font: 0.9em/1.5 ui-monospace, monospace; }
.wind-demo-note { display: grid; gap: 0.3rem; }
.wind-demo-textarea { box-sizing: border-box; width: 100%; min-height: 4rem; border: 1px solid #849bb3; border-radius: 0.35rem; padding: 0.55rem; color: inherit; font: inherit; }
.wind-demo-textarea:focus-visible { outline: 3px solid #1670b8; outline-offset: 2px; }

ネイティブの外観

appearance は対応済みの Wind ユーティリティクラスを使います。

ネイティブの外観
HTML
<div class="wind-demo-new"><input class="appearance-auto" type="checkbox" checked aria-label="Native checkbox"><input class="appearance-none" type="checkbox" aria-label="Unstyled checkbox"></div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-new {
  color: #203046;
  font: 14px / 1.5 system-ui, sans-serif;
}
.appearance-auto {
  appearance: auto;
}
.appearance-none {
  appearance: none;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-new": true
    },
    "safelist": {
      "docs-preview": [
        "appearance-auto",
        "appearance-none"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-new { color: #203046; font: 14px/1.5 system-ui, sans-serif; }

任意値と名前付きの値

アクセント色には accent-brand のような色トークン、固定値 transparent と current、または有効な任意色を指定できます。cursor、pointer-events、resize、select はカタログにある有限のキーワードを使い、テーマ値は継承しません。装飾用の検索アイコンに pointer-events-none を指定すると、クリックは下の入力欄に届きます。利用できないボタンでは not-allowed カーソルだけでなく、disabled も指定します。

関連ガイド: ユーティリティの文法 · バリアント

カタログの詳細

accent

フィールド値
カタログ識別子v1.accent
クラスパターンaccent-<suffix>
文法{"acceptedKinds":["keyword","token","arbitrary"],"arbitraryProperty":"accent-color","allowsFractionSlash":false,"allowsColorOpacity":true}
受け入れる値2
トークンカテゴリcolors
負の値の規則forbidden
競合グループと順位interaction (40)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティaccent-color

受け入れる値

種類接尾辞出力される値
keyword"transparent""transparent"
keyword"current""currentColor"

宣言テンプレート

プロパティ値の種類固定値
accent-colorresolvednull

カタログの例

クラスの例期待される宣言
accent-[red]/40accent-color: color-mix(in oklab, red 40%, transparent)

appearance-auto

フィールド値
カタログ識別子v1.appearance-auto
クラスパターンappearance-auto
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位interaction (40)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティappearance

受け入れる値

種類接尾辞出力される値
exactnull"auto"

宣言テンプレート

プロパティ値の種類固定値
appearanceresolvednull

カタログの例

クラスの例期待される宣言
appearance-autoappearance: auto

appearance-none

フィールド値
カタログ識別子v1.appearance-none
クラスパターンappearance-none
文法{"acceptedKinds":["exact"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位interaction (40)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティappearance

受け入れる値

種類接尾辞出力される値
exactnull"none"

宣言テンプレート

プロパティ値の種類固定値
appearanceresolvednull

カタログの例

クラスの例期待される宣言
appearance-noneappearance: none

cursor

フィールド値
カタログ識別子v1.cursor
クラスパターンcursor-<suffix>
文法{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値36
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位interaction (40)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティcursor

受け入れる値

種類接尾辞出力される値
keyword"auto""auto"
keyword"default""default"
keyword"pointer""pointer"
keyword"not-allowed""not-allowed"
keyword"text""text"
keyword"move""move"
keyword"grab""grab"
keyword"grabbing""grabbing"
keyword"wait""wait"
keyword"help""help"
keyword"none""none"
keyword"progress""progress"
keyword"crosshair""crosshair"
keyword"cell""cell"
keyword"copy""copy"
keyword"alias""alias"
keyword"no-drop""no-drop"
keyword"context-menu""context-menu"
keyword"vertical-text""vertical-text"
keyword"all-scroll""all-scroll"
keyword"zoom-in""zoom-in"
keyword"zoom-out""zoom-out"
keyword"n-resize""n-resize"
keyword"s-resize""s-resize"
keyword"e-resize""e-resize"
keyword"w-resize""w-resize"
keyword"ne-resize""ne-resize"
keyword"nw-resize""nw-resize"
keyword"se-resize""se-resize"
keyword"sw-resize""sw-resize"
keyword"ew-resize""ew-resize"
keyword"ns-resize""ns-resize"
keyword"nesw-resize""nesw-resize"
keyword"nwse-resize""nwse-resize"
keyword"col-resize""col-resize"
keyword"row-resize""row-resize"

宣言テンプレート

プロパティ値の種類固定値
cursorresolvednull

カタログの例

クラスの例期待される宣言
cursor-pointercursor: pointer

pointer-events

フィールド値
カタログ識別子v1.pointer-events
クラスパターンpointer-events-<suffix>
文法{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値2
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位interaction (40)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティpointer-events

受け入れる値

種類接尾辞出力される値
keyword"auto""auto"
keyword"none""none"

宣言テンプレート

プロパティ値の種類固定値
pointer-eventsresolvednull

カタログの例

クラスの例期待される宣言
pointer-events-nonepointer-events: none

resize

フィールド値
カタログ識別子v1.resize
クラスパターンresize or resize-<suffix>
文法{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値4
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位interaction (40)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティresize

受け入れる値

種類接尾辞出力される値
keywordnull"both"
keyword"x""horizontal"
keyword"y""vertical"
keyword"none""none"

宣言テンプレート

プロパティ値の種類固定値
resizeresolvednull

カタログの例

クラスの例期待される宣言
resize-xresize: horizontal

select

フィールド値
カタログ識別子v1.select
クラスパターンselect-<suffix>
文法{"acceptedKinds":["keyword"],"arbitraryProperty":null,"allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値4
トークンカテゴリトークンカテゴリなし
負の値の規則forbidden
競合グループと順位interaction (40)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティuser-select

受け入れる値

種類接尾辞出力される値
keyword"none""none"
keyword"text""text"
keyword"all""all"
keyword"auto""auto"

宣言テンプレート

プロパティ値の種類固定値
user-selectresolvednull

カタログの例

クラスの例期待される宣言
select-noneuser-select: none

Revision History

作成更新