shadcn_view_component 0.3.3

data/app/components/shadcn/radio_group/item/component.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module RadioGroup
+    module Item
+      # RadioGroupItem
+      class Component < ApplicationViewComponent
+        INDICATOR_CLASSES = "relative flex items-center justify-center"
+        DOT_CLASSES = "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 " \
+                      "fill-primary"
+
+        default_tag :button
+        slot_name :"radio-group-item"
+
+        style do
+          base {
+            "aspect-square size-4 shrink-0 rounded-full border border-input text-primary " \
+            "shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring " \
+            "focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed " \
+            "disabled:opacity-50 aria-invalid:border-destructive " \
+            "aria-invalid:ring-destructive/20 dark:bg-input/30 " \
+            "dark:aria-invalid:ring-destructive/40"
+          }
+        end
+
+        attr_reader :value, :checked, :disabled
+
+        def initialize(value:, checked: false, disabled: false, **attributes)
+          @value = value.to_s
+          @checked = checked
+          @disabled = disabled
+          super(**attributes)
+        end
+
+        def state
+          checked ? "checked" : "unchecked"
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            type: "button",
+            role: "radio",
+            value: value,
+            disabled: (true if disabled),
+            tabindex: (checked ? "0" : "-1"),
+            "aria-checked" => checked.to_s,
+            "data-state" => state,
+            "data-value" => value,
+            "data-disabled" => (true if disabled),
+            "data-shadcn--radio-group-target" => "item",
+            "data-action" => "click->shadcn--radio-group#select " \
+                             "keydown->shadcn--radio-group#keydown"
+          }.merge(defaults))
+        end
+
+        def call
+          render_element(body: indicator)
+        end
+
+        private
+
+        def indicator
+          tag.span(
+            render(Icon::Component.new("circle", class: DOT_CLASSES)),
+            "data-slot": "radio-group-indicator",
+            "data-state": state,
+            hidden: (true unless checked),
+            class: INDICATOR_CLASSES
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/radio_group/preview.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module RadioGroup
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Disabled" and "Invalid".
+      def states
+        render_with_template
+      end
+    end
+  end
+end

data/app/components/shadcn/radio_group/previews/default.html.erb

@@ -0,0 +1,15 @@
+<%# The items are rendered in the *block*, not through the `item` slot.
+
+    Slot content is emitted before block content, so an item added through the
+    slot is hoisted out of the row it was written in and lands above every
+    label — which is what this preview did until someone looked at the page.
+    `FormBuilder#shadcn_radio_group` renders them in the block for the same
+    reason and says so. %>
+<%= render(Shadcn::RadioGroup::Component.new(name: "plan", value: "comfortable")) do %>
+  <% [["default", "Default"], ["comfortable", "Comfortable"], ["compact", "Compact"]].each do |value, text| %>
+    <div class="flex items-center gap-2">
+      <%= render(Shadcn::RadioGroup::Item::Component.new(value:, checked: value == "comfortable", id: "r-#{value}")) %>
+      <%= render(Shadcn::Label::Component.new(for: "r-#{value}")) { text } %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/shadcn/radio_group/previews/states.html.erb

@@ -0,0 +1,41 @@
+<%# Upstream's "Disabled" and "Invalid". Items rendered in the block rather than
+    through the slot — see the default preview for why. Disabled comes in two sizes here — the
+    whole group, and one option of an otherwise usable group — because they are
+    different things and only the second is a choice you can see and not make. %>
+<div class="flex flex-col gap-8">
+  <div class="flex flex-col gap-2">
+    <div class="text-sm font-medium">One option is unavailable</div>
+    <%= render(Shadcn::RadioGroup::Component.new(name: "shipping", value: "standard")) do %>
+      <% [["standard", "Standard", false], ["express", "Express", false], ["same-day", "Same day — sold out", true]].each do |value, text, disabled| %>
+        <div class="flex items-center gap-2">
+          <%= render(Shadcn::RadioGroup::Item::Component.new(value:, checked: value == "standard", disabled:, id: "rs-#{value}")) %>
+          <%= render(Shadcn::Label::Component.new(for: "rs-#{value}")) { text } %>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+
+  <div class="flex flex-col gap-2">
+    <div class="text-sm font-medium">The whole group is disabled</div>
+    <%= render(Shadcn::RadioGroup::Component.new(name: "billing", value: "monthly", disabled: true)) do %>
+      <% [["monthly", "Monthly"], ["yearly", "Yearly"]].each do |value, text| %>
+        <div class="flex items-center gap-2">
+          <%= render(Shadcn::RadioGroup::Item::Component.new(value:, checked: value == "monthly", id: "rb-#{value}")) %>
+          <%= render(Shadcn::Label::Component.new(for: "rb-#{value}")) { text } %>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+
+  <div class="flex flex-col gap-2">
+    <div class="text-sm font-medium">Nothing chosen, and something had to be</div>
+    <%= render(Shadcn::RadioGroup::Component.new(name: "size", "aria-invalid": "true")) do %>
+      <% [["s", "Small"], ["m", "Medium"]].each do |value, text| %>
+        <div class="flex items-center gap-2">
+          <%= render(Shadcn::RadioGroup::Item::Component.new(value:, id: "rz-#{value}", "aria-invalid": "true")) %>
+          <%= render(Shadcn::Label::Component.new(for: "rz-#{value}")) { text } %>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+</div>

data/app/components/shadcn/resizable/component.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Resizable
+    # Port of registry/new-york-v4/ui/resizable.tsx, whose behaviour is
+    # `react-resizable-panels` — 2,252 lines of compiled JavaScript and no
+    # dependencies of its own.
+    #
+    # What the package supplies is a drag, a keyboard and some arithmetic over
+    # `flex-grow`: panels are proportions of a flex container, so the layout is
+    # the browser's and the port only has to move two numbers when a handle is
+    # dragged. See [features/resizable.md](../../../../.claude/docs/features/resizable.md).
+    #
+    # Panels and handles are written in the block, in order, because that is
+    # what a group is — `panel, handle, panel` — and because slot content is
+    # emitted before block content, which would gather all the panels above all
+    # the handles.
+    class Component < ApplicationViewComponent
+      ORIENTATIONS = %i[horizontal vertical].freeze
+
+      default_tag :div
+      slot_name :"resizable-panel-group"
+
+      style do
+        base { "flex h-full w-full aria-[orientation=vertical]:flex-col" }
+      end
+
+      attr_reader :orientation
+
+      # `orientation:` is upstream's `direction`, renamed to what the DOM calls
+      # it: the class above reads `aria-orientation`, and a group that says
+      # `direction` in Ruby and `orientation` in HTML is one name too many.
+      def initialize(orientation: :horizontal, **attributes)
+        @orientation = ORIENTATIONS.include?(orientation&.to_sym) ? orientation.to_sym : :horizontal
+        super(**attributes)
+      end
+
+      # No `aria-orientation`, and the direction is an inline style — which is
+      # what upstream's own DOM does, and was arrived at the hard way.
+      #
+      # The class above reads `aria-[orientation=vertical]:flex-col`, so the
+      # obvious port writes that attribute; axe then refuses it, because no role
+      # a plain group can carry supports `aria-orientation`. Reading what
+      # `react-resizable-panels` v4 actually renders settles it: the group has
+      # no role and no `aria-orientation` at all, and sets `flex-direction`
+      # inline. **The class is vestigial upstream too** — it reads an attribute
+      # the package stopped rendering. It is kept because `parity_spec` compares
+      # what upstream emits, and dropping it would claim a divergence that is
+      # not one.
+      def element_attributes(**defaults)
+        super(**{
+          "data-controller" => "shadcn--resizable",
+          "data-shadcn--resizable-orientation-value" => orientation,
+          style: merged_style(("flex-direction:column" if orientation == :vertical))
+        }.compact.merge(defaults))
+      end
+    end
+  end
+end

data/app/components/shadcn/resizable/handle/component.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Resizable
+    module Handle
+      # The bar between two panels: a `role="separator"` that can be dragged and
+      # driven from the keyboard.
+      #
+      # Its own orientation is the *opposite* of the group's — a row of panels
+      # is divided by a vertical line — and `role="separator"` defaults to
+      # horizontal, so the attribute is always written rather than left out.
+      class Component < ApplicationViewComponent
+        GRIP_CLASSES = "z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border"
+
+        default_tag :div
+        slot_name :"resizable-handle"
+
+        style do
+          base {
+            "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 " \
+            "after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring " \
+            "focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px " \
+            "aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 " \
+            "aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full " \
+            "aria-[orientation=horizontal]:after:translate-x-0 " \
+            "aria-[orientation=horizontal]:after:-translate-y-1/2 " \
+            "[&[aria-orientation=horizontal]>div]:rotate-90"
+          }
+        end
+
+        attr_reader :with_handle, :orientation, :disabled
+
+        # `with_handle:` is upstream's `withHandle`: the grip a pointer can see,
+        # which is off by default there too.
+        def initialize(with_handle: false, orientation: :horizontal, disabled: false, **attributes)
+          @with_handle = with_handle
+          @orientation = orientation&.to_sym == :vertical ? :vertical : :horizontal
+          @disabled = disabled
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            role: "separator",
+            # The group's orientation decides the separator's, inverted.
+            "aria-orientation" => orientation == :vertical ? "horizontal" : "vertical",
+            "aria-disabled" => (disabled.presence && "true"),
+            tabindex: (disabled ? "-1" : "0"),
+            "data-separator" => "inactive",
+            "data-shadcn--resizable-target" => "handle",
+            "data-action" => "pointerdown->shadcn--resizable#press keydown->shadcn--resizable#keydown",
+            style: merged_style("flex-basis:auto;flex-grow:0;flex-shrink:0")
+          }.compact.merge(defaults))
+        end
+
+        def call
+          render_element(body: grip)
+        end
+
+        private
+
+        def grip
+          return unless with_handle
+
+          tag.div(render(Icon::Component.new("grip-vertical", class: "size-2.5")), class: GRIP_CLASSES)
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/resizable/panel/component.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Resizable
+    module Panel
+      # One panel. Upstream carries no classes at all — the package writes an
+      # inline style — so what is reproduced here is that style, minus the part
+      # of it that resets borders and padding the package cannot know a caller
+      # wants.
+      #
+      # A size is a share, not a pixel: `flex-grow` against `flex-basis: 0` is
+      # exactly the proportional layout the package computes, which is why the
+      # browser does the resizing and the controller only writes two numbers.
+      class Component < ApplicationViewComponent
+        default_tag :div
+        slot_name :"resizable-panel"
+
+        attr_reader :default_size, :min_size, :max_size
+
+        # Sizes are percentages, as upstream's are. Give every panel one or give
+        # none: with a mix, the ones without would each take a single share
+        # against another's twenty-five, which is not what anybody means.
+        def initialize(default_size: nil, min_size: nil, max_size: nil, **attributes)
+          @default_size = default_size
+          @min_size = min_size
+          @max_size = max_size
+          super(**attributes)
+        end
+
+        def element_attributes(**defaults)
+          super(**{
+            id: panel_id,
+            "data-shadcn--resizable-target" => "panel",
+            "data-min-size" => min_size,
+            "data-max-size" => max_size,
+            style: merged_style(
+              "flex-basis:0;flex-shrink:1;flex-grow:#{default_size || 1};overflow:hidden;" \
+              "display:flex;min-width:0;min-height:0"
+            )
+          }.compact.merge(defaults))
+        end
+
+        private
+
+        # A handle points at the panel before it with `aria-controls`, so a
+        # panel needs a name of its own even when the caller gives it none.
+        def panel_id
+          attributes[:id] || "shadcn-resizable-panel-#{SecureRandom.hex(4)}"
+        end
+      end
+    end
+  end
+end

data/app/components/shadcn/resizable/preview.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module Resizable
+    class Preview < ApplicationViewComponentPreview
+      # Upstream's own first example: two panels side by side.
+      def default
+        render_with_template
+      end
+
+      # Upstream's "Vertical".
+      def vertical
+        render_with_template
+      end
+
+      # Upstream's "With Handle", and a nested group — a row inside a column,
+      # which is the layout the docs use to show both at once.
+      def with_handle
+        render_with_template
+      end
+    end
+  end
+end

data/app/components/shadcn/resizable/previews/default.html.erb

@@ -0,0 +1,25 @@
+<%# Upstream's own example. Panels and handles go in the block, in order — a
+    group *is* `panel, handle, panel` — and sizes are percentages. %>
+<%= render(Shadcn::Resizable::Component.new(class: "max-w-md rounded-lg border md:min-w-[450px]")) do %>
+  <%= render(Shadcn::Resizable::Panel::Component.new(default_size: 50)) do %>
+    <div class="flex h-[200px] items-center justify-center p-6">
+      <span class="font-semibold">One</span>
+    </div>
+  <% end %>
+  <%= render(Shadcn::Resizable::Handle::Component.new) %>
+  <%= render(Shadcn::Resizable::Panel::Component.new(default_size: 50)) do %>
+    <%= render(Shadcn::Resizable::Component.new(orientation: :vertical)) do %>
+      <%= render(Shadcn::Resizable::Panel::Component.new(default_size: 25)) do %>
+        <div class="flex h-full items-center justify-center p-6">
+          <span class="font-semibold">Two</span>
+        </div>
+      <% end %>
+      <%= render(Shadcn::Resizable::Handle::Component.new(orientation: :vertical)) %>
+      <%= render(Shadcn::Resizable::Panel::Component.new(default_size: 75)) do %>
+        <div class="flex h-full items-center justify-center p-6">
+          <span class="font-semibold">Three</span>
+        </div>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/shadcn/resizable/previews/vertical.html.erb

@@ -0,0 +1,19 @@
+<%# Upstream's "Vertical": the group's orientation decides both the layout and
+    the separator's own, which is the opposite of it — a column of panels is
+    divided by a horizontal line. %>
+<%= render(Shadcn::Resizable::Component.new(
+      orientation: :vertical,
+      class: "min-h-[200px] max-w-md rounded-lg border"
+    )) do %>
+  <%= render(Shadcn::Resizable::Panel::Component.new(default_size: 25)) do %>
+    <div class="flex h-full items-center justify-center p-6">
+      <span class="font-semibold">Header</span>
+    </div>
+  <% end %>
+  <%= render(Shadcn::Resizable::Handle::Component.new(orientation: :vertical)) %>
+  <%= render(Shadcn::Resizable::Panel::Component.new(default_size: 75)) do %>
+    <div class="flex h-full items-center justify-center p-6">
+      <span class="font-semibold">Content</span>
+    </div>
+  <% end %>
+<% end %>

data/app/components/shadcn/resizable/previews/with_handle.html.erb

@@ -0,0 +1,17 @@
+<%# Upstream's "With Handle": the grip a pointer can see. Off by default there
+    too — a handle is a hit area whether or not it is drawn.
+
+    `min_size:` and `max_size:` are percentages, and the drag stops at them. %>
+<%= render(Shadcn::Resizable::Component.new(class: "min-h-[200px] max-w-md rounded-lg border")) do %>
+  <%= render(Shadcn::Resizable::Panel::Component.new(default_size: 25, min_size: 15, max_size: 60)) do %>
+    <div class="flex h-full items-center justify-center p-6">
+      <span class="font-semibold">Sidebar</span>
+    </div>
+  <% end %>
+  <%= render(Shadcn::Resizable::Handle::Component.new(with_handle: true)) %>
+  <%= render(Shadcn::Resizable::Panel::Component.new(default_size: 75)) do %>
+    <div class="flex h-full items-center justify-center p-6">
+      <span class="font-semibold">Content</span>
+    </div>
+  <% end %>
+<% end %>

data/app/components/shadcn/scroll_area/component.rb

@@ -0,0 +1,84 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module ScrollArea
+    # Port of registry/new-york-v4/ui/scroll-area.tsx, whose behaviour is Radix's
+    # `ScrollArea` — 1,189 lines against shadcn's 58, and vendored at
+    # `vendor/radix/ui/scroll-area.tsx`.
+    #
+    # Like shadcn's own, this composes the whole thing rather than exposing the
+    # parts: the viewport, one scrollbar per requested axis, and the corner where
+    # two of them meet. `orientation:` is this port's way of asking for the
+    # second bar, which shadcn does by passing a second `<ScrollBar>` as a child
+    # — a shape that relies on React's Slottable to hoist it out of the viewport
+    # and has no counterpart here.
+    #
+    # Two of Radix's four `type` strategies are reproduced: `hover`, its default,
+    # and `always`. See features/scroll-area.md.
+    class Component < ApplicationViewComponent
+      slot_name :"scroll-area"
+
+      style do
+        base { "relative" }
+      end
+
+      attr_reader :orientation, :type, :scroll_hide_delay
+
+      def initialize(orientation: :vertical, type: :hover, scroll_hide_delay: 600, **attributes)
+        @orientation = orientation&.to_sym || :vertical
+        @type = type&.to_sym || :hover
+        @scroll_hide_delay = scroll_hide_delay
+        super(**attributes)
+      end
+
+      def element_attributes(**defaults)
+        super(**{
+          "data-controller" => "shadcn--scroll-area",
+          "data-shadcn--scroll-area-type-value" => type,
+          "data-shadcn--scroll-area-hide-delay-value" => scroll_hide_delay,
+          "data-action" => "pointerenter->shadcn--scroll-area#pointerEnter " \
+                           "pointerleave->shadcn--scroll-area#pointerLeave"
+        }.merge(defaults))
+      end
+
+      def call
+        render_element(body: safe_join([ viewport, *scrollbars, corner ].compact))
+      end
+
+      private
+
+      def horizontal? = [ :horizontal, :both ].include?(orientation)
+      def vertical? = [ :vertical, :both ].include?(orientation)
+
+      def viewport
+        render(
+          Shadcn::ScrollArea::Viewport::Component.new(horizontal: horizontal?, vertical: vertical?)
+        ) { content }
+      end
+
+      def scrollbars
+        [
+          (bar(:vertical) if vertical?),
+          (bar(:horizontal) if horizontal?)
+        ]
+      end
+
+      def bar(axis)
+        render(Shadcn::ScrollArea::Scrollbar::Component.new(orientation: axis))
+      end
+
+      # Only where two bars meet. Radix sizes it from the two bars' thicknesses
+      # and publishes them as the custom properties each bar stops short at.
+      def corner
+        return unless horizontal? && vertical?
+
+        tag.div(
+          style: "position: absolute; right: 0; bottom: 0; " \
+                 "width: var(--radix-scroll-area-corner-width, 0px); " \
+                 "height: var(--radix-scroll-area-corner-height, 0px);",
+          "data-shadcn--scroll-area-target": "corner"
+        )
+      end
+    end
+  end
+end

data/app/components/shadcn/scroll_area/preview.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module ScrollArea
+    class Preview < ApplicationViewComponentPreview
+      def default
+        render_with_template
+      end
+    end
+  end
+end

data/app/components/shadcn/scroll_area/previews/default.html.erb

@@ -0,0 +1,36 @@
+<%# Upstream's example: a bordered box of tags, taller than it is allowed to be.
+
+    The scrollbar is `type: :hover` by default — Radix's default too — so it is
+    not there until the pointer is. Radix *unmounts* it; nothing is unmounted
+    here, so it ships with `data-state="hidden"` and the controller moves the
+    attribute.
+
+    The second one asks for both axes, which is what puts a corner between the
+    two bars: each stops short of the other by exactly its thickness, and the
+    corner fills what is left. `always` on that one so both are visible in a
+    screenshot without a pointer in it. %>
+<div class="flex gap-6">
+  <%= render(Shadcn::ScrollArea::Component.new(class: "h-64 w-48 rounded-md border")) do %>
+    <div class="p-4">
+      <h4 class="mb-4 text-sm leading-none font-medium">Tags</h4>
+      <% 24.times do |index| %>
+        <div class="text-sm">v1.2.0-beta.<%= 24 - index %></div>
+        <%= render(Shadcn::Separator::Component.new(class: "my-2")) %>
+      <% end %>
+    </div>
+  <% end %>
+
+  <%= render(Shadcn::ScrollArea::Component.new(
+        orientation: :both, type: :always, class: "h-64 w-72 rounded-md border"
+      )) do %>
+    <div class="w-max p-4">
+      <% 20.times do |row| %>
+        <div class="flex gap-4 py-1 text-sm whitespace-nowrap">
+          <% 6.times do |column| %>
+            <span class="w-24">cell <%= row + 1 %>.<%= column + 1 %></span>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/app/components/shadcn/scroll_area/scrollbar/component.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module Shadcn
+  module ScrollArea
+    module Scrollbar
+      # Radix's `ScrollAreaScrollbar`, and shadcn's `ScrollBar`.
+      #
+      # `data-state` is `hidden` from the server and the controller moves it.
+      # Radix *unmounts* the bar instead — with `type="hover"`, the default, it
+      # is not in the DOM until the pointer arrives (measured on the live demo).
+      # Nothing is unmounted here for the same reason nothing is portalled, so
+      # the state attribute carries what a missing element carried there.
+      class Component < ApplicationViewComponent
+        slot_name :"scroll-area-scrollbar"
+
+        style do
+          base { "flex touch-none p-px transition-colors select-none" }
+
+          variants {
+            orientation {
+              vertical { "h-full w-2.5 border-l border-l-transparent" }
+              horizontal { "h-2.5 flex-col border-t border-t-transparent" }
+            }
+          }
+
+          defaults { { orientation: :vertical } }
+        end
+
+        attr_reader :orientation
+
+        def initialize(orientation: :vertical, **attributes)
+          @orientation = orientation&.to_sym || :vertical
+          super(**attributes)
+        end
+
+        def style_variants
+          { orientation: }
+        end
+
+        # The inline geometry is Radix's: the bar is absolutely positioned
+        # against the root and stops short of the corner, and the thumb's size
+        # travels as a custom property rather than as a width the controller
+        # writes on the thumb itself (measured on the live demo).
+        def element_attributes(**defaults)
+          super(**{
+            style: merged_style(position_style),
+            "data-orientation" => orientation,
+            "data-state" => "hidden",
+            "data-shadcn--scroll-area-target" => "scrollbar",
+            "data-action" => "pointerdown->shadcn--scroll-area#startDrag"
+          }.merge(defaults))
+        end
+
+        def call
+          render_element(body: content.presence || render(Shadcn::ScrollArea::Thumb::Component.new))
+        end
+
+        private
+
+        def position_style
+          if orientation == :vertical
+            "position: absolute; top: 0; right: 0; " \
+            "bottom: var(--radix-scroll-area-corner-height, 0px);"
+          else
+            "position: absolute; bottom: 0; left: 0; " \
+            "right: var(--radix-scroll-area-corner-width, 0px);"
+          end
+        end
+      end
+    end
+  end
+end