shadcn_view_components 0.2.0

data/app/components/shadcn/calendar.rb

@@ -0,0 +1,276 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # 月表示カレンダー(10-roadmap Phase 4 の個別評価ルート)。
+  # upstream は react-day-picker を使うが、本gemは依存せず月テーブルを
+  # サーバ側で描く(見出し・曜日・日付ボタン)。年月の移動は GET リンクの
+  # サーバラウンドトリップで行い、JSは表示中のgrid内のフォーカス移動だけを補助する。
+  # JS無効時も月移動と日付ボタンは利用できる(05 §5 Graceful)
+  #
+  # 契約クラスは lib/shadcn_view_components/contracts/calendar.rb に
+  # 手動で保守する(静的抽出の対象外のため再生成されない点に注意)
+  class Calendar < BaseComponent
+    CONTROLLER = "shadcn--calendar"
+    START_OF_WEEK = 0 # 日曜始まり
+    WEEKDAY_LABELS = %w[日 月 火 水 木 金 土].freeze
+
+    sig do
+      params(
+        month: Date,
+        selected: T.nilable(Date),
+        month_path: T.nilable(String),
+        args: T::Hash[Symbol, T.untyped]
+      ).void.checked(:never)
+    end
+    def initialize(month: Date.current.beginning_of_month, selected: nil, month_path: nil, **args)
+      assign_accessibility_root_id(args, prefix: "calendar")
+      @root_id = T.let(args.fetch(:id).to_s, String)
+      @month = month
+      @selected = selected
+      # 年月移動リンクの送り先(例: pages_calendar_path)。未指定の時はリンクを出さない
+      @month_path = month_path
+      super(**args)
+    end
+
+    sig { override.returns(String) }
+    def call
+      content_tag(:div, **html_attributes) do
+        # ナビはキャプション行に絶対配置で重なる(upstream rdp と同じ構造)
+        navigation = Navigation.new(month: @month, caption_id: caption_id, month_path: @month_path)
+        safe_join([render(navigation), month_grid])
+      end
+    end
+
+    # キャプション行 + 前後月ボタン群。ボタン群はキャプション行の上に絶対配置する
+    # (month_path が与えられたときのみリンクになる)
+    class Navigation < BaseComponent
+      sig do
+        params(
+          month: Date,
+          caption_id: String,
+          month_path: T.nilable(String),
+          args: T::Hash[Symbol, T.untyped]
+        ).void.checked(:never)
+      end
+      def initialize(month:, caption_id:, month_path: nil, **args)
+        @month = month
+        @month_path = month_path
+        @caption_id = T.let(caption_id, String)
+        super(**args)
+      end
+
+      sig { override.returns(String) }
+      def call
+        safe_join([caption_row, nav_buttons])
+      end
+
+      private
+
+      # 月タイトルの行(upstream month_caption 相当)
+      sig { returns(String) }
+      def caption_row
+        row_class = "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size) font-medium select-none text-sm"
+        content_tag(
+          :div,
+          id: @caption_id,
+          class: row_class,
+          data: { slot: "calendar-caption", shadcn_generated_id: "true" }
+        ) { "#{@month.year}年#{@month.month}月" }
+      end
+
+      sig { returns(String) }
+      def nav_buttons
+        content_tag(:div, class: "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1") do
+          safe_join([
+                      nav_link(direction: :previous, label: "前の月") { chevron(:left) },
+                      nav_link(direction: :next, label: "次の月") { chevron(:right) }
+                    ])
+        end
+      end
+
+      sig { params(direction: Symbol, label: String, block: T.proc.returns(String)).returns(String) }
+      def nav_link(direction:, label:, &block)
+        target = direction == :previous ? @month.prev_month : @month.next_month
+        content_tag(:a,
+                    href: "#{@month_path}?month=#{target.strftime('%Y-%m')}",
+                    class: "inline-flex items-center justify-center rounded-lg size-(--cell-size) p-0 select-none " \
+                           "hover:bg-muted hover:text-foreground outline-none aria-disabled:opacity-50",
+                    aria: { label: label }) { block.call }
+      end
+
+      sig { params(direction: Symbol).returns(String) }
+      def chevron(direction)
+        path = direction == :left ? %(<path d="m15 18-6-6 6-6"/>) : %(<path d="m9 18 6-6-6-6"/>)
+        content_tag(
+          :svg,
+          xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none",
+          stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round",
+          width: "16", height: "16", class: "size-4",
+          aria: { hidden: "true" }
+        ) { raw(path) }
+      end
+    end
+
+    class DayButton < BaseComponent
+      # 1日分のボタン(契約クラスは手動契約モジュールを参照)
+      sig do
+        params(
+          date: Date,
+          selected: T::Boolean,
+          outside: T::Boolean,
+          today: T::Boolean,
+          args: T::Hash[Symbol, T.untyped]
+        ).void.checked(:never)
+      end
+      def initialize(date: Date.current, selected: false, outside: false, today: false, **args)
+        @date = date
+        @selected = selected
+        @outside = outside
+        @today = today
+        super(**args)
+      end
+
+      sig { override.returns(String) }
+      def default_tag
+        "button"
+      end
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        attributes = super
+        attributes[:type] = "button"
+        attributes[:tabindex] = "-1" if @outside && !attributes.key?(:tabindex)
+        merge_nested(
+          attributes,
+          :aria,
+          { label: full_date_label }.merge(@today ? { current: "date" } : {})
+        )
+        merge_nested(attributes, :data, {
+                       day: @date.iso8601,
+                       selected_single: @selected.to_s,
+                       today: @today.to_s,
+                       outside: @outside.to_s
+                     })
+        attributes
+      end
+
+      sig { returns(String) }
+      def full_date_label
+        "#{@date.year}年#{@date.month}月#{@date.day}日"
+      end
+
+      sig { override.returns(String) }
+      def call
+        content_tag(tag, **html_attributes) { @date.day.to_s }
+      end
+    end
+
+    private
+
+    sig { returns(T::Hash[Symbol, T.untyped]) }
+    def html_attributes
+      # flex コンテナ化(契約クラスの冒頭)は重要: block のままだと内側 table
+      # (width:100%)の自然幅が利用幅に解決されて w-fit が効かなくなる
+      attributes = @html_args.merge(class: self.class.classes(extra: @user_class))
+      data = T.cast(attributes[:data], T.nilable(T::Hash[Symbol, T.untyped])) || {}
+      attributes[:data] = {
+        slot: "calendar",
+        controller: CONTROLLER,
+        action: "keydown->#{CONTROLLER}#navigate"
+      }.merge(data)
+      attributes
+    end
+
+    sig { returns(String) }
+    def caption_id = "#{@root_id}-caption"
+
+    sig { returns(String) }
+    def grid_id = "#{@root_id}-grid"
+
+    sig { returns(String) }
+    def month_grid
+      # 幅は 7×(--cell-size)(= spacing 7 × 7 = w-49)に固定する(upstream rdp の
+      # month_grid と同じ 196px)。w-full / w-fit の親子で幅を決めると Chrome の
+      # table 自然幅計算が利用幅に解決され、セルが --cell-size より広がり、
+      # upstream と寸法が合わなくなる
+      content_tag(
+        :table,
+        id: grid_id,
+        role: "grid",
+        class: "w-49 border-collapse",
+        aria: { labelledby: caption_id },
+        data: { slot: "calendar-grid", shadcn_generated_id: "true" }
+      ) do
+        safe_join([weekday_header, weeks_body])
+      end
+    end
+
+    sig { returns(String) }
+    def weekday_header
+      content_tag(:thead) do
+        content_tag(:tr, class: "flex") do
+          safe_join(WEEKDAY_LABELS.map do |label|
+            content_tag(:th,
+                        class: "flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none",
+                        scope: "col", abbr: label) { label }
+          end)
+        end
+      end
+    end
+
+    sig { returns(String) }
+    def weeks_body
+      content_tag(:tbody) do
+        safe_join(month_weeks.map do |week|
+          content_tag(:tr, class: "mt-2 flex w-full") do
+            safe_join(week.map { |date| day_cell(date) })
+          end
+        end)
+      end
+    end
+
+    # 月を週(日曜始まり)ごとに分割する。前月末尾・翌月先頭は outside 扱いで補完する
+    sig { returns(T::Array[T::Array[Date]]) }
+    def month_weeks
+      first = @month.beginning_of_month
+      last = @month.end_of_month
+      start_date = first - ((first.wday - START_OF_WEEK) % 7)
+      end_date = last + ((START_OF_WEEK - 1 - last.wday) % 7)
+      (start_date..end_date).each_slice(7).to_a
+    end
+
+    sig { params(date: Date).returns(String) }
+    def day_cell(date)
+      today = date == Date.current
+      outside = date.month != @month.month
+      selected = date == @selected
+      # w-full を付けない: td が table 幅の 100% を要求すると 7列分の割合指定で
+      # table 幅が利用幅まで引き延ばされてセルが --cell-size より広くなる
+      cell_class = +"group/day relative aspect-square h-full p-0 text-center select-none " \
+                    "[&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) " \
+                    "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)"
+      cell_class << " rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none" if today
+      cell_class << " text-muted-foreground aria-selected:text-muted-foreground" if outside
+
+      data = { selected: selected.to_s, today: today.to_s, outside: outside.to_s }
+      content_tag(:td, role: "gridcell", class: cell_class, aria: { selected: selected.to_s }, data: data) do
+        render(DayButton.new(
+                 date: date,
+                 selected: selected,
+                 outside: outside,
+                 today: today,
+                 **T.unsafe({ tabindex: date == focus_date ? "0" : "-1" })
+               ))
+      end
+    end
+
+    sig { returns(Date) }
+    def focus_date
+      dates = month_weeks.flatten
+      [@selected, Date.current, @month.beginning_of_month].compact.find { |date| dates.include?(date) } || @month
+    end
+
+    private_constant :Navigation
+  end
+end

data/app/components/shadcn/card.rb

@@ -0,0 +1,18 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  class Card < BaseComponent
+    class Header < BaseComponent; end
+
+    class Title < BaseComponent; end
+
+    class Description < BaseComponent; end
+
+    class Action < BaseComponent; end
+
+    class Content < BaseComponent; end
+
+    class Footer < BaseComponent; end
+  end
+end

data/app/components/shadcn/carousel.rb

@@ -0,0 +1,236 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # scroll-snap 相当の縦横スクロール + ナビ補助(10-roadmap Phase 2)。
+  # upstream は embla-carousel を使うが、本gemは生のスクロール操作で再実装する
+  # (契約クラス・data-slot は upstream 由来のまま)
+  # JS無効時フォールバック: JS必須(スライド自体はSSR済みで読めるが、ナビは動作しない — 05 §5)
+  class Carousel < BaseComponent
+    CONTROLLER = "shadcn--carousel"
+    KEYDOWN_ACTION = T.let("keydown->#{CONTROLLER}#navigate".freeze, String)
+    ROOT_CLASS = "group/carousel"
+
+    private_constant :KEYDOWN_ACTION, :ROOT_CLASS
+
+    sig do
+      params(
+        orientation: T.any(Symbol, String),
+        direction: T.any(Symbol, String),
+        args: T::Hash[Symbol, T.untyped]
+      ).void.checked(:never)
+    end
+    def initialize(orientation: self.class.property_default(:orientation),
+                   direction: self.class.property_default(:direction), **args)
+      assign_accessibility_root_id(args, prefix: "carousel")
+      @orientation = T.let(normalize_property(:orientation, orientation), String)
+      @direction = T.let(normalize_property(:direction, direction), String)
+      super(**args)
+    end
+
+    # upstream のJSXルートは Context.Provider ラッパーで、実要素はその内側の div。
+    # 契約上のルートスロット(carousel)から静的属性(role 等)を引く
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def contract_root_slot
+      contract_slot("carousel")
+    end
+
+    sig { override.returns(T::Hash[Symbol, T.untyped]) }
+    def html_attributes
+      attributes = super
+      data = T.cast(attributes[:data], T.nilable(T::Hash[Symbol, T.untyped])) || {}
+      attributes[:data] = data.merge(
+        controller: compose_tokens(CONTROLLER, data[:controller]),
+        action: compose_tokens(KEYDOWN_ACTION, data[:action]),
+        orientation: @orientation,
+        direction: @direction
+      )
+      attributes[:dir] = @direction
+      attributes[:tabindex] = 0 unless attributes.key?(:tabindex)
+      attributes
+    end
+
+    sig { override.returns(String) }
+    def resolved_class
+      self.class.classes(extra: [ROOT_CLASS, @user_class].compact.join(" "))
+    end
+
+    class Content < BaseComponent
+      ORIENTATION_CLASS = "group-data-vertical/carousel:ml-0 group-data-vertical/carousel:-mt-4 " \
+                          "group-data-vertical/carousel:flex-col"
+
+      private_constant :ORIENTATION_CLASS
+
+      # upstream は外側に overflow-hidden の viewport、内側に契約クラスを持つ
+      # 二重構造(accordion-content と同じ split 構造)
+      sig { override.returns(String) }
+      def call
+        attributes = @html_args.merge(class: root_static_class)
+        merge_nested(attributes, :data, { slot: contract_root_slot[:name] })
+        content_tag(tag, **attributes) do
+          extra = [ORIENTATION_CLASS, @user_class].compact.join(" ")
+          content_tag(:div, class: self.class.classes(extra:)) { content }
+        end
+      end
+
+      private
+
+      sig { returns(T.nilable(String)) }
+      def root_static_class
+        T.cast(contract_root_slot.dig(:static_attributes, :class), T.nilable(String))
+      end
+    end
+
+    class Item < BaseComponent
+      ORIENTATION_CLASS = "group-data-vertical/carousel:pl-0 group-data-vertical/carousel:pt-4"
+
+      private_constant :ORIENTATION_CLASS
+
+      # div(role="group" aria-roledescription="slide")。契約静的属性は自動付与
+      sig { override.returns(String) }
+      def resolved_class
+        self.class.classes(extra: [ORIENTATION_CLASS, @user_class].compact.join(" "))
+      end
+    end
+
+    # Previous/Next の共通部分: upstream は Button(outline/icon)に静的クラスを足して構成する
+    class Navigation < BaseComponent
+      extend T::Helpers
+
+      abstract!
+
+      ORIENTATION_CLASS = "group-data-vertical/carousel:inset-y-auto " \
+                          "group-data-vertical/carousel:left-1/2 group-data-vertical/carousel:my-0 " \
+                          "group-data-vertical/carousel:-translate-x-1/2 group-data-vertical/carousel:rotate-90"
+      RTL_ICON_CLASS = "group-[[data-orientation=horizontal][data-direction=rtl]]/carousel:rotate-180"
+
+      private_constant :ORIENTATION_CLASS, :RTL_ICON_CLASS
+
+      private
+
+      # Button へ渡す引数(バリアント既定 + 契約静的クラス + ナビ用data属性)。
+      # 利用者指定(variant 等の上書き)を優先する
+      sig { returns(T::Hash[Symbol, T.untyped]) }
+      def button_attributes
+        attributes = {
+          variant: :outline,
+          size: :"icon-sm",
+          type: "button",
+          disabled: true
+        }.merge(@html_args)
+        attributes[:class] = navigation_class
+        merge_navigation_data(attributes)
+        attributes
+      end
+
+      sig { returns(String) }
+      def navigation_class
+        extra = [ORIENTATION_CLASS, edge_orientation_class, @user_class].compact.join(" ")
+        self.class.classes(extra:)
+      end
+
+      sig { params(attributes: T::Hash[Symbol, T.untyped]).void }
+      def merge_navigation_data(attributes)
+        user_data = T.cast(attributes[:data], T.nilable(T::Hash[Symbol, T.untyped])) || {}
+        attributes[:data] = user_data.merge(
+          slot: self.class.contract.const_get(:ROOT_SLOT),
+          action: compose_tokens(navigation_action, user_data[:action])
+        )
+      end
+
+      # action のみ書き、controller は付けない: ルート(div[data-controller])の
+      # インスタンスへイベントを委任する(ボタン自前のインスタンスは viewport を持たない)
+      sig { returns(String) }
+      def navigation_action
+        "#{CONTROLLER}#scroll#{direction.camelize}"
+      end
+
+      sig { abstract.returns(String) }
+      def direction; end
+
+      sig { abstract.returns(String) }
+      def edge_orientation_class; end
+
+      sig { returns(String) }
+      def screen_reader_label
+        content_tag(:span, class: "sr-only") { "#{direction.camelize} slide" }
+      end
+
+      sig { params(paths: String).returns(String) }
+      def icon_svg(paths)
+        content_tag(
+          :svg,
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          width: "16",
+          height: "16",
+          class: "size-4 #{RTL_ICON_CLASS}",
+          aria: { hidden: "true" }
+        ) do
+          raw(paths)
+        end
+      end
+
+      sig { params(required: String, supplied: T.untyped).returns(String) }
+      def compose_tokens(required, supplied)
+        ([required] + supplied.to_s.split).uniq.join(" ")
+      end
+    end
+
+    class Previous < Navigation
+      sig { override.returns(String) }
+      def call
+        render(Button.new(**button_attributes)) do
+          safe_join([icon_svg(%(<path d="m15 18-6-6 6-6"/>)), screen_reader_label])
+        end
+      end
+
+      private
+
+      sig { override.returns(String) }
+      def direction
+        "previous"
+      end
+
+      sig { override.returns(String) }
+      def edge_orientation_class
+        "group-data-vertical/carousel:-top-12"
+      end
+    end
+
+    class Next < Navigation
+      sig { override.returns(String) }
+      def call
+        render(Button.new(**button_attributes)) do
+          safe_join([icon_svg(%(<path d="m9 18 6-6-6-6"/>)), screen_reader_label])
+        end
+      end
+
+      private
+
+      sig { override.returns(String) }
+      def direction
+        "next"
+      end
+
+      sig { override.returns(String) }
+      def edge_orientation_class
+        "group-data-vertical/carousel:right-auto group-data-vertical/carousel:-bottom-12"
+      end
+    end
+
+    private
+
+    sig { params(required: String, supplied: T.untyped).returns(String) }
+    def compose_tokens(required, supplied)
+      ([required] + supplied.to_s.split).uniq.join(" ")
+    end
+
+    private_constant :Navigation
+  end
+end

data/app/components/shadcn/chart.rb

@@ -0,0 +1,57 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  # グラフ(Phase 4)。upstream は recharts を使うが、本gemは
+  # 「容器と凡例・ツールチップの構造」のみを提供し、描画はホストが
+  # 好きなライブラリ(Chart.js 等)で行う設計(10-roadmap Phase 4 の個別評価)
+  # JS無効時フォールバック: Graceful(容器・凡例はSSR済み)
+  # Chart自体は名前空間であり、描画には配下のクラスを使う。
+  module Chart
+    class Container < BaseComponent
+      # 契約スロット構成: 名前無しラッパー > chart(描画領域)
+      sig { override.returns(String) }
+      def call
+        content_tag(:div, **html_attributes) do
+          content_tag(:div, class: self.class.classes(extra: @user_class), data: { slot: "chart" }) { content }
+        end
+      end
+
+      sig { override.returns(T::Hash[Symbol, T.untyped]) }
+      def html_attributes
+        attributes = @html_args.dup
+        attributes[:class] = T.cast(contract_slot("").dig(:static_attributes, :class), T.nilable(String))
+        attributes
+      end
+    end
+
+    class TooltipContent < BaseComponent
+      # ツールチップ本体(契約クラスのみ。中身は利用者が組む)
+      sig { override.returns(String) }
+      def call
+        content_tag(tag, **html_attributes) { content }
+      end
+    end
+
+    class LegendContent < BaseComponent
+      # 凡例本体(契約クラスのみ)
+      sig { override.returns(String) }
+      def call
+        content_tag(tag, **html_attributes) { content }
+      end
+    end
+
+    class Style < BaseComponent
+      # グラフ用のCSSを <style> として出力する(upstream と同じ役割)
+      sig { override.returns(String) }
+      def default_tag
+        "style"
+      end
+
+      sig { override.returns(String) }
+      def call
+        content_tag(:style) { content.to_s }
+      end
+    end
+  end
+end

data/app/components/shadcn/checkbox.rb

@@ -0,0 +1,64 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  class Checkbox < BaseComponent
+    include NativeCheckedState
+
+    NATIVE_STATE_CLASS = T.let([
+      "not-checked:border-input not-checked:bg-transparent dark:not-checked:bg-input/30",
+      "checked:border-primary checked:bg-primary checked:text-primary-foreground",
+      "group-has-[:focus-visible]/field-label:checked:border-primary dark:checked:bg-primary"
+    ].join(" ").freeze, String)
+
+    # 契約タグは CheckboxPrimitive.Root。ネイティブな input[type=checkbox] として描く
+    # (JS無しで動作 — 05-stimulus-hotwire §3「checkbox = input + CSS」)。
+    # base-nova の契約クラスは data-checked / data-unchecked(属性の存在)を参照する。
+    # checked 属性(利用者指定)の有無から導出して素のinputでも発火させる
+    sig { override.returns(String) }
+    def default_tag
+      "input"
+    end
+
+    sig { override.returns(String) }
+    def call
+      content_tag(:span, class: "relative flex w-fit") do
+        safe_join([input_element, indicator_element])
+      end
+    end
+
+    private
+
+    sig { returns(String) }
+    def input_element
+      attributes = html_attributes.merge(type: "checkbox")
+      # ネイティブウィジェット描画(appearance:auto)はCSSの背景の上にOS標準の箱を
+      # 塗る(dark時は白箱として視覚差になる)ため消す
+      attributes[:class] = [attributes[:class], "appearance-none", NATIVE_STATE_CLASS].compact.join(" ")
+      merge_native_checked_state(attributes, checked: native_checked?(@html_args))
+      void_tag("input", **attributes)
+    end
+
+    # 契約のスロット構造(checkbox-indicator)を保つ。普段は非表示で、
+    # peer であるinputのチェック状態に連動して出す(upstreamのIndicatorと同じ挙動)
+    sig { returns(String) }
+    def indicator_element
+      contract_class = T.cast(contract_slot("checkbox-indicator").dig(:static_attributes, :class), T.nilable(String))
+      content_tag(:span, data: { slot: "checkbox-indicator" }, aria: { hidden: "true" }, class: [contract_class, "pointer-events-none absolute inset-0 hidden peer-checked:grid"].compact.join(" ")) do
+        content_tag(
+          :svg,
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "2",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          class: "size-3.5"
+        ) do
+          raw(%(<path d="M20 6 9 17l-5-5"/>))
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/collapsible.rb

@@ -0,0 +1,25 @@
+# typed: strict
+# frozen_string_literal: true
+
+module Shadcn
+  class Collapsible < BaseComponent
+    # ネイティブな details(JS無しで開閉可 — 05-stimulus-hotwire §3)
+    # JS無効時フォールバック: Graceful(ネイティブ要素で成立)
+    sig { override.returns(String) }
+    def default_tag
+      "details"
+    end
+
+    class Trigger < BaseComponent
+      # JS無しで開閉するため trigger は summary 要素
+      sig { override.returns(String) }
+      def default_tag
+        "summary"
+      end
+    end
+
+    class Content < BaseComponent
+      # details の子として開閉時に表示される。契約クラスはそのまま適用
+    end
+  end
+end