Drawer コンポーネントの lightDismiss デフォルトを false に修正

Web Awesome のブール属性規約に従い、<wa-drawer> の lightDismiss の既定値を true から false に変更しました。これにより属性の有無だけで外部クリック時の閉鎖動作を宣言的に制御できるようになります。

背景

lightDismiss がデフォルトで true であったことは、Web Awesome の貢献ガイドラインで定められた "ブール属性はデフォルトで false にすべき" という原則に反していました。ブール属性は属性が存在すれば true、省略すれば false と解釈されるため、デフォルトが true だと属性を除去して無効化できませんでした。\
この不一致は Issue #2433 で指摘され、<wa-dialog> と同様に false が正しい既定値であることが確認されました。\
結果として、デフォルトが true のままでは API の予測可能性が低下し、利用者が意図しない自動閉鎖を経験していました。

技術的な変更

変更の核心は WaDrawer クラスの lightDismiss プロパティ定義を true から false に置き換えることです。このシンプルな差分により、属性のデフォルト挙動が HTML のブール属性規約と一致します。\
コード側のロジックは if (this.lightDismiss) { … } で判定しているため、デフォルトが false になるだけで既存ロジックへの副作用はありません。

@@
-  @property({ attribute: 'light-dismiss', type: Boolean }) lightDismiss = true;
+  @property({ attribute: 'light-dismiss', type: Boolean }) lightDismiss = false;

テストも同様に期待値を true から false に更新しました。drawer.test.ts のデフォルト確認テストが新しい既定値を正しく検証するよう改修されています。

@@
-        it('should default lightDismiss to true', async () => {
+        it('should default lightDismiss to false', async () => {
           const el = await fixture<WaDrawer>(html`<wa-drawer>Content</wa-drawer>`);
-          expect(el.lightDismiss).to.be.true;
+          expect(el.lightDismiss).to.be.false;
         });

内部処理は変更されていないため、既存の lightDismiss 判定ロジックはそのまま動作します。this.lightDismiss が true の場合にのみ背景クリックで閉じる処理が走る設計は保持され、デフォルトが false になるだけで機能的な差分はありません。

設計判断

ブール属性のデフォルトを常に false とする方針を全コンポーネントに統一するという設計判断が示されています。属性が省略可能になることで、マークアップだけでコンポーネントの振る舞いを明示的に制御でき、API の一貫性が向上します。\
代替案として新規属性キー（例: light-dismiss-enabled）を導入する議論もありましたが、既存の light-dismiss キーを修正することで後方互換性とコードベースのシンプルさを保ちました。

この変更は <wa-dialog> で既に採用されているデフォルト false と整合性を取ることに焦点を当てています。同一属性名で挙動が統一されることで、開発者はコンポーネント間で同じ思考モデルを適用できます。\
結果として、属性の有無だけで有効/無効を切り替える標準的な HTML パターンが全体に浸透します。

まとめ

<wa-drawer> の lightDismiss デフォルトを false に修正したことで、Web Awesome のブール属性規約と <wa-dialog> との整合性が取れ、属性の有無だけで外部クリック時の閉鎖動作を宣言的に制御できるようになりました。変更はプロパティ定義とテストの差分のみで、既存ロジックへの影響は最小限に抑えられています。