openproject-primer_view_components 0.6.3

data/app/components/primer/alpha/tab_nav.css

@@ -0,0 +1 @@
+.tabnav{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));margin-bottom:var(--stack-gap-normal,1rem);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);overflow:auto}.tabnav-tab{background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-bottom:0;color:var(--fgColor-muted,var(--color-fg-muted));display:inline-block;flex-shrink:0;font-size:var(--text-body-size-medium,.875rem);line-height:23px;padding:var(--base-size-8,.5rem) var(--control-medium-paddingInline-spacious,1rem);text-decoration:none;transition:color .2s cubic-bezier(.3,0,.5,1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--bgColor-default,var(--color-canvas-default));border-color:var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,6px) var(--borderRadius-medium,6px) 0 0;color:var(--fgColor-default,var(--color-fg-default))}.tabnav-tab.selected .octicon,.tabnav-tab[aria-current]:not([aria-current=false]) .octicon,.tabnav-tab[aria-selected=true] .octicon{color:inherit}.tabnav-tab:hover{color:var(--fgColor-default,var(--color-fg-default));text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--borderRadius-medium,6px) var(--borderRadius-medium,6px) 0 0!important}.tabnav-tab:focus,.tabnav-tab:focus-visible{outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--fgColor-muted,var(--color-fg-muted))}.tabnav-tab .octicon{margin-right:var(--control-small-gap,.25rem)}.tabnav-tab .Counter{color:inherit;margin-left:var(--control-small-gap,.25rem)}.tabnav-extra{color:var(--fgColor-muted,var(--color-fg-muted));display:inline-block;font-size:var(--text-body-size-small,.75rem);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:2px}a.tabnav-extra:hover{color:var(--fgColor-accent,var(--color-accent-fg));text-decoration:none}.tabnav-btn{margin-left:var(--controlStack-medium-gap-condensed,.5rem)}

data/app/components/primer/alpha/tab_nav.css.json

@@ -0,0 +1,24 @@
+{
+  "name": "alpha/tab_nav",
+  "selectors": [
+    ".tabnav",
+    ".tabnav-tabs",
+    ".tabnav-tab",
+    ".tabnav-tab.selected",
+    ".tabnav-tab[aria-current]:not([aria-current=false])",
+    ".tabnav-tab[aria-selected=true]",
+    ".tabnav-tab.selected .octicon",
+    ".tabnav-tab[aria-current]:not([aria-current=false]) .octicon",
+    ".tabnav-tab[aria-selected=true] .octicon",
+    ".tabnav-tab:hover",
+    ".tabnav-tab:focus",
+    ".tabnav-tab:focus-visible",
+    ".tabnav-tab .octicon",
+    ".tabnav-tab:active",
+    ".tabnav-tab .Counter",
+    ".tabnav-extra",
+    ".tabnav-extra>.octicon",
+    "a.tabnav-extra:hover",
+    ".tabnav-btn"
+  ]
+}

data/app/components/primer/alpha/tab_nav.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["tab_nav.pcss"],"names":[],"mappings":"AAGA,QAGE,oHAAuE,CADvE,0CAAsC,CADtC,YAGF,CAEA,aACE,YAAa,CACb,iEAAiD,CACjD,aACF,CAEA,YAQE,wBAA6B,CAE7B,4DAAgB,CAAhB,eAAgB,CAJhB,gDAA2B,CAL3B,oBAAqB,CACrB,aAAc,CAEd,8CAAuC,CACvC,gBAAiB,CAFjB,kFAAwE,CAIxE,oBAAqB,CAIrB,4CAwCF,CAtCE,yGAIE,mEAAwC,CACxC,mEAAwC,CACxC,+EAAwE,CAHxE,oDAQF,CAHE,oIACE,aACF,CAGF,kBACE,oDAA6B,CAC7B,oBAAqB,CACrB,uBACF,CAEA,4CAEE,yFAEF,CAJA,4CAGE,mBACF,CAMA,wCAHE,gDAMF,CAHA,qBACE,4CAEF,CAEA,qBAEE,aAAc,CADd,2CAEF,CAQF,cAKE,gDAA2B,CAJ3B,oBAAqB,CAGrB,4CAAsC,CADtC,gBAAiB,CADjB,gBAQF,CAHE,uBACE,gBACF,CAKF,qBACE,kDAA4B,CAC5B,oBACF,CAOA,YACE,0DACF","file":"tab_nav.css","sourcesContent":["/* tabnav */\n\n/* Outer wrapper */\n.tabnav {\n  margin-top: 0;\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.tabnav-tabs {\n  display: flex;\n  margin-bottom: calc(var(--borderWidth-thin) * -1);\n  overflow: auto;\n}\n\n.tabnav-tab {\n  display: inline-block;\n  flex-shrink: 0;\n  padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);\n  font-size: var(--text-body-size-medium);\n  line-height: 23px;\n  color: var(--fgColor-muted);\n  text-decoration: none;\n  background-color: transparent;\n  border: var(--borderWidth-thin) solid transparent;\n  border-bottom: 0;\n  transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n\n  &.selected,\n  &[aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    color: var(--fgColor-default);\n    background-color: var(--bgColor-default); /* cover bottom border */\n    border-color: var(--borderColor-default);\n    border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;\n\n    & .octicon {\n      color: inherit;\n    }\n  }\n\n  &:hover {\n    color: var(--fgColor-default);\n    text-decoration: none;\n    transition-duration: 0.1s;\n  }\n\n  &:focus,\n  &:focus-visible {\n    border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0 !important;\n    outline-offset: -6px;\n  }\n\n  &:active {\n    color: var(--fgColor-muted);\n  }\n\n  & .octicon {\n    margin-right: var(--control-small-gap);\n    color: var(--fgColor-muted);\n  }\n\n  & .Counter {\n    margin-left: var(--control-small-gap);\n    color: inherit;\n  }\n}\n\n/* Tabnav extras\n**\n** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're\n** inline text or links. */\n\n.tabnav-extra {\n  display: inline-block;\n  padding-top: 10px;\n  margin-left: 10px;\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-muted);\n\n  & > .octicon {\n    margin-right: 2px;\n  }\n}\n\n/* When tabnav-extra are anchors\n** stylelint-disable-next-line selector-no-qualifying-type */\na.tabnav-extra:hover {\n  color: var(--fgColor-accent);\n  text-decoration: none;\n}\n\n/* Tabnav buttons\n**\n** For when there are multiple buttons, space them out appropriately. Requires\n** the buttons to be floated or inline-block. */\n\n.tabnav-btn {\n  margin-left: var(--controlStack-medium-gap-condensed);\n}\n"]}

data/app/components/primer/alpha/tab_nav.html.erb

@@ -0,0 +1,11 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= extra if @align == :left %>
+
+  <%= render Primer::BaseComponent.new(**@body_arguments) do %>
+    <% tabs.each do |tab| %>
+      <%= tab %>
+    <% end %>
+  <% end %>
+
+  <%= extra if @align == :right %>
+<% end %>

data/app/components/primer/alpha/tab_nav.pcss

@@ -0,0 +1,100 @@
+/* tabnav */
+
+/* Outer wrapper */
+.tabnav {
+  margin-top: 0;
+  margin-bottom: var(--stack-gap-normal);
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
+}
+
+.tabnav-tabs {
+  display: flex;
+  margin-bottom: calc(var(--borderWidth-thin) * -1);
+  overflow: auto;
+}
+
+.tabnav-tab {
+  display: inline-block;
+  flex-shrink: 0;
+  padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);
+  font-size: var(--text-body-size-medium);
+  line-height: 23px;
+  color: var(--fgColor-muted);
+  text-decoration: none;
+  background-color: transparent;
+  border: var(--borderWidth-thin) solid transparent;
+  border-bottom: 0;
+  transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+
+  &.selected,
+  &[aria-selected='true'],
+  &[aria-current]:not([aria-current='false']) {
+    color: var(--fgColor-default);
+    background-color: var(--bgColor-default); /* cover bottom border */
+    border-color: var(--borderColor-default);
+    border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;
+
+    & .octicon {
+      color: inherit;
+    }
+  }
+
+  &:hover {
+    color: var(--fgColor-default);
+    text-decoration: none;
+    transition-duration: 0.1s;
+  }
+
+  &:focus,
+  &:focus-visible {
+    border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0 !important;
+    outline-offset: -6px;
+  }
+
+  &:active {
+    color: var(--fgColor-muted);
+  }
+
+  & .octicon {
+    margin-right: var(--control-small-gap);
+    color: var(--fgColor-muted);
+  }
+
+  & .Counter {
+    margin-left: var(--control-small-gap);
+    color: inherit;
+  }
+}
+
+/* Tabnav extras
+**
+** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're
+** inline text or links. */
+
+.tabnav-extra {
+  display: inline-block;
+  padding-top: 10px;
+  margin-left: 10px;
+  font-size: var(--text-body-size-small);
+  color: var(--fgColor-muted);
+
+  & > .octicon {
+    margin-right: 2px;
+  }
+}
+
+/* When tabnav-extra are anchors
+** stylelint-disable-next-line selector-no-qualifying-type */
+a.tabnav-extra:hover {
+  color: var(--fgColor-accent);
+  text-decoration: none;
+}
+
+/* Tabnav buttons
+**
+** For when there are multiple buttons, space them out appropriately. Requires
+** the buttons to be floated or inline-block. */
+
+.tabnav-btn {
+  margin-left: var(--controlStack-medium-gap-condensed);
+}

data/app/components/primer/alpha/tab_nav.rb

@@ -0,0 +1,136 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `TabNav` to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.
+    # For panel navigation, use <%= link_to_component(Primer::Alpha::TabPanels) %> instead.
+    #
+    # @accessibility
+    #   - By default, `TabNav` renders links within a `<nav>` element. `<nav>` has an
+    #     implicit landmark role of `navigation` which should be reserved for main links.
+    #     For all other set of links, set tag to `:div`.
+    #   - See <%= link_to_component(Primer::Alpha::Navigation::Tab) %> for additional
+    #     accessibility considerations.
+    class TabNav < Primer::Component
+      include Primer::TabbedComponentHelper
+      include Primer::TabNavHelper
+
+      status :alpha
+
+      BODY_TAG_DEFAULT = :ul
+
+      TAG_DEFAULT = :nav
+      TAG_OPTIONS = [TAG_DEFAULT, :div].freeze
+
+      # Tabs to be rendered. For more information, refer to <%= link_to_component(Primer::Alpha::Navigation::Tab) %>.
+      #
+      # @param selected [Boolean] Whether the tab is selected.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :tabs, lambda { |selected: false, **system_arguments|
+        system_arguments[:classes] = tab_nav_tab_classes(system_arguments[:classes])
+        Primer::Alpha::Navigation::Tab.new(
+          list: true,
+          selected: selected,
+          **system_arguments
+        )
+      }
+
+      # Renders extra content to the `TabNav`. This will be rendered after the tabs.
+      #
+      # @param align [Symbol] <%= one_of(Primer::Alpha::TabNav::EXTRA_ALIGN_OPTIONS) %>
+      renders_one :extra, lambda { |align: EXTRA_ALIGN_DEFAULT, &block|
+        @align = fetch_or_fallback(EXTRA_ALIGN_OPTIONS, align, EXTRA_ALIGN_DEFAULT)
+
+        view_context.capture { block&.call }
+      }
+
+      # @example Default with `<nav>`
+      #   @description
+      #     `<nav>` is a landmark and should be reserved for main navigation links. See <%= link_to_accessibility %>.
+      #   @code
+      #     <%= render(Primer::Alpha::TabNav.new(label: "Default")) do |component| %>
+      #       <% component.with_tab(selected: true, href: "#") { "Tab 1" } %>
+      #       <% component.with_tab(href: "#") { "Tab 2" } %>
+      #       <% component.with_tab(href: "#") { "Tab 3" } %>
+      #     <% end %>
+      #
+      # @example Default with `<div>`
+      #   <%= render(Primer::Alpha::TabNav.new(label: "Default")) do |component| %>
+      #     <% component.with_tab(selected: true, href: "#") { "Tab 1" } %>
+      #     <% component.with_tab(href: "#") { "Tab 2" } %>
+      #     <% component.with_tab(href: "#") { "Tab 3" } %>
+      #   <% end %>
+      #
+      # @example With icons and counters
+      #   <%= render(Primer::Alpha::TabNav.new(label: "With icons and counters")) do |component| %>
+      #     <% component.with_tab(href: "#", selected: true) do |tab| %>
+      #       <% tab.with_icon(icon: :star) %>
+      #       <% tab.with_text { "Item 1" } %>
+      #     <% end %>
+      #     <% component.with_tab(href: "#") do |tab| %>
+      #       <% tab.with_icon(icon: :star) %>
+      #       <% tab.with_text { "Item 2" } %>
+      #       <% tab.with_counter(count: 10) %>
+      #     <% end %>
+      #     <% component.with_tab(href: "#") do |tab| %>
+      #       <% tab.with_text { "Item 3" } %>
+      #       <% tab.with_counter(count: 10) %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example With extra content
+      #   <%= render(Primer::Alpha::TabNav.new(label: "With extra content")) do |component| %>
+      #     <% component.with_tab(selected: true, href: "#") { "Tab 1" }%>
+      #     <% component.with_tab(href: "#") { "Tab 2" } %>
+      #     <% component.with_tab(href: "#") { "Tab 3" } %>
+      #     <% component.with_extra do %>
+      #       <%= render(Primer::ButtonComponent.new(float: :right)) { "Button" } %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Adding extra content after the tabs
+      #   <%= render(Primer::Alpha::TabNav.new(label: "Adding extra content after the tabs", display: :flex, body_arguments: { flex: 1 })) do |component| %>
+      #     <% component.with_tab(selected: true, href: "#") { "Tab 1" }%>
+      #     <% component.with_tab(href: "#") { "Tab 2" } %>
+      #     <% component.with_tab(href: "#") { "Tab 3" } %>
+      #     <% component.with_extra(align: :right) do %>
+      #       <div>
+      #         <%= render(Primer::ButtonComponent.new) { "Button" } %>
+      #       </div>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Customizing the body
+      #   <%= render(Primer::Alpha::TabNav.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :accent_emphasis })) do |component| %>
+      #     <% component.with_tab(selected: true, href: "#") { "Tab 1" }%>
+      #     <% component.with_tab(href: "#") { "Tab 2" } %>
+      #     <% component.with_tab(href: "#") { "Tab 3" } %>
+      #   <% end %>
+      #
+      # @param tag [Symbol] <%= one_of(Primer::Alpha::TabNav::TAG_OPTIONS) %>
+      # @param label [String] Sets an `aria-label` that helps assistive technology users understand the purpose of the links, and distinguish it from similar elements.
+      # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(label:, tag: TAG_DEFAULT, body_arguments: {}, **system_arguments)
+        @align = EXTRA_ALIGN_DEFAULT
+        @system_arguments = system_arguments
+        @body_arguments = body_arguments
+
+        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
+        @system_arguments[:classes] = tab_nav_classes(system_arguments[:classes])
+
+        @body_arguments[:tag] = BODY_TAG_DEFAULT
+        @body_arguments[:classes] = tab_nav_body_classes(body_arguments[:classes])
+
+        aria_label_for_page_nav(label)
+      end
+
+      def before_render
+        # Eagerly evaluate content to avoid https://github.com/primer/view_components/issues/1790
+        content
+
+        super
+      end
+    end
+  end
+end

data/app/components/primer/alpha/tab_panels.html.erb

@@ -0,0 +1,14 @@
+<%= tab_container_wrapper(with_panel: true, **@wrapper_arguments) do %>
+  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
+    <%= extra if @align == :left %>
+    <%= render Primer::BaseComponent.new(**@body_arguments) do %>
+      <% tabs.each do |tab| %>
+        <%= tab %>
+      <% end %>
+    <% end %>
+    <%= extra if @align == :right %>
+  <% end %>
+  <% tabs.each do |tab| %>
+    <%= tab.panel %>
+  <% end %>
+<% end %>

data/app/components/primer/alpha/tab_panels.rb

@@ -0,0 +1,89 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `TabPanels` for tabs with panel navigation.
+    class TabPanels < Primer::Component
+      include Primer::TabbedComponentHelper
+      include Primer::TabNavHelper
+
+      status :alpha
+
+      BODY_TAG_DEFAULT = :ul
+
+      TAG_DEFAULT = :nav
+      TAG_OPTIONS = [TAG_DEFAULT, :div].freeze
+
+      # Tabs to be rendered. For more information, refer to <%= link_to_component(Primer::Alpha::Navigation::Tab) %>.
+      #
+      # @param id [String] Unique ID of tab.
+      # @param selected [Boolean] Whether the tab is selected.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :tabs, lambda { |id:, selected: false, **system_arguments|
+        system_arguments[:id] = id
+        system_arguments[:classes] = tab_nav_tab_classes(system_arguments[:classes])
+
+        Primer::Alpha::Navigation::Tab.new(
+          selected: selected,
+          with_panel: true,
+          list: true,
+          panel_id: "panel-#{id}",
+          **system_arguments
+        )
+      }
+
+      # Renders extra content to the `TabPanels`. This will be rendered after the tabs.
+      #
+      # @param align [Symbol] <%= one_of(Primer::Alpha::TabNav::EXTRA_ALIGN_OPTIONS) %>
+      renders_one :extra, lambda { |align: EXTRA_ALIGN_DEFAULT, &block|
+        @align = fetch_or_fallback(EXTRA_ALIGN_OPTIONS, align, EXTRA_ALIGN_DEFAULT)
+
+        view_context.capture { block&.call }
+      }
+
+      # @example Default
+      #   <%= render(Primer::Alpha::TabPanels.new(label: "With panels")) do |component| %>
+      #     <% component.with_tab(id: "tab-1", selected: true) do |tab| %>
+      #       <% tab.with_text { "Tab 1" } %>
+      #       <% tab.with_panel do %>
+      #         Panel 1
+      #       <% end %>
+      #     <% end %>
+      #     <% component.with_tab(id: "tab-2") do |tab| %>
+      #       <% tab.with_text { "Tab 2" } %>
+      #       <% tab.with_panel do %>
+      #         Panel 2
+      #       <% end %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param label [String] Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs.
+      # @param align [Symbol] <%= one_of(Primer::TabNavHelper::EXTRA_ALIGN_OPTIONS) %> - Defaults to <%= Primer::TabNavHelper::EXTRA_ALIGN_DEFAULT %>
+      # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
+      # @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> for the `TabContainer` wrapper.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(label:, body_arguments: {}, wrapper_arguments: {}, **system_arguments)
+        @align = EXTRA_ALIGN_DEFAULT
+        @wrapper_arguments = wrapper_arguments
+
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = tab_nav_classes(@system_arguments[:classes])
+
+        @body_arguments = deny_tag_argument(**body_arguments)
+        @body_arguments[:tag] = :ul
+        @body_arguments[:classes] = tab_nav_body_classes(@body_arguments[:classes])
+
+        @body_arguments[:role] = :tablist
+        @body_arguments[:"aria-label"] = label
+      end
+
+      def before_render
+        # Eagerly evaluate content to avoid https://github.com/primer/view_components/issues/1790
+        content
+
+        super
+      end
+    end
+  end
+end

data/app/components/primer/alpha/text_area.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    TextArea = Primer::FormComponents.from_input(Primer::Forms::Dsl::TextAreaInput)
+
+    # Text areas are multi-line text inputs rendered using the `<textarea>` tag in HTML.
+    #
+    # @form_usage
+    #   class ExampleForm < ApplicationForm
+    #     form do |example_form|
+    #       example_form.text_area(attributes)
+    #     end
+    #   end
+    class TextArea < Primer::Component
+      status :alpha
+
+      # @!method initialize
+      #
+      # @macro form_full_width_arguments
+      # @macro form_input_arguments
+    end
+  end
+end

data/app/components/primer/alpha/text_field.css

@@ -0,0 +1 @@
+.FormControl{display:inline-flex;flex-direction:column;gap:var(--base-size-4,.25rem)}.FormControl--fullWidth{display:flex}.FormControl-label{color:var(--fgColor-default,var(--color-fg-default));font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-medium,1.42857);-webkit-user-select:none;user-select:none}.FormControl-caption{color:var(--fgColor-muted,var(--color-fg-muted));font-weight:var(--text-caption-weight,400);margin-bottom:0}.FormControl-caption,.FormControl-inlineValidation{font-size:var(--text-caption-size,.75rem);line-height:var(--text-caption-lineHeight,1.33333)}.FormControl-inlineValidation{fill:var(--control-borderColor-danger,var(--color-danger-emphasis));align-items:flex-start;color:var(--control-borderColor-danger,var(--color-danger-emphasis));display:flex;flex-direction:row;font-weight:var(--base-text-weight-semibold,600);gap:var(--base-size-4,.25rem)}.FormControl-inlineValidation p{margin-bottom:0}.FormControl-inlineValidation--visual{align-items:center;display:flex;min-height:var(--base-size-16,1rem)}.FormControl-spacingWrapper{display:flex;flex-direction:column;row-gap:.5rem}.FormControl-horizontalGroup{column-gap:.5rem;display:flex}.FormControl-input,.FormControl-select,.FormControl-textarea{background-color:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--control-borderColor-rest,var(--color-border-default));color:var(--fgColor-default,var(--color-fg-default))}.FormControl-input[disabled],.FormControl-select[disabled],.FormControl-textarea[disabled]{-webkit-text-fill-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg));border-color:var(--control-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed;opacity:1}.FormControl-input[invalid]:not(:focus),.FormControl-select[invalid]:not(:focus),.FormControl-textarea[invalid]:not(:focus){border-color:var(--control-borderColor-danger,var(--color-danger-emphasis))}.FormControl-input:not([type=checkbox],[type=radio]):focus,.FormControl-select:not([type=checkbox],[type=radio]):focus,.FormControl-textarea:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}.FormControl-input:not([type=checkbox],[type=radio]):focus:not(:focus-visible),.FormControl-select:not([type=checkbox],[type=radio]):focus:not(:focus-visible),.FormControl-textarea:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor,var(--color-accent-fg));outline:none}.FormControl-input:not([type=checkbox],[type=radio]):focus-visible,.FormControl-select:not([type=checkbox],[type=radio]):focus-visible,.FormControl-textarea:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}.FormControl-input,.FormControl-select,.FormControl-textarea{border-radius:var(--borderRadius-medium,6px);font-size:var(--text-body-size-medium,.875rem);line-height:var(--text-body-lineHeight-medium,1.42857);padding-block:calc(var(--control-medium-paddingBlock, 6px) - var(--borderWidth-thin, 1px));padding-inline:var(--control-medium-paddingInline-condensed,.5rem);transition:80ms cubic-bezier(.33,1,.68,1);transition-property:color,background-color,box-shadow,border-color;width:100%}.FormControl-input[disabled]::placeholder,.FormControl-select[disabled]::placeholder,.FormControl-textarea[disabled]::placeholder{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.FormControl-input[readonly],.FormControl-select[readonly],.FormControl-textarea[readonly]{background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg))}.FormControl-input::placeholder,.FormControl-select::placeholder,.FormControl-textarea::placeholder{color:var(--control-fgColor-placeholder,var(--color-fg-subtle));opacity:1}.FormControl-input.FormControl-small,.FormControl-select.FormControl-small,.FormControl-textarea.FormControl-small{font-size:var(--text-body-size-small,.75rem);height:var(--control-small-size,1.75rem);padding-block:var(--control-small-paddingBlock,.25rem);padding-inline:var(--control-small-paddingInline-normal,.75rem)}.FormControl-input.FormControl-medium,.FormControl-select.FormControl-medium,.FormControl-textarea.FormControl-medium{height:var(--control-medium-size,2rem)}.FormControl-input.FormControl-large,.FormControl-select.FormControl-large,.FormControl-textarea.FormControl-large{height:var(--control-large-size,2.5rem);padding-block:var(--control-large-paddingBlock,.625rem);padding-inline:var(--control-large-paddingInline-normal,.75rem)}.FormControl-input.FormControl-inset,.FormControl-select.FormControl-inset,.FormControl-textarea.FormControl-inset{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.FormControl-input.FormControl-inset:focus,.FormControl-input.FormControl-inset:focus-visible,.FormControl-select.FormControl-inset:focus,.FormControl-select.FormControl-inset:focus-visible,.FormControl-textarea.FormControl-inset:focus,.FormControl-textarea.FormControl-inset:focus-visible{background-color:var(--bgColor-default,var(--color-canvas-default))}.FormControl-input.FormControl-monospace,.FormControl-select.FormControl-monospace,.FormControl-textarea.FormControl-monospace{font-family:var(--fontStack-monospace,ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace)}.FormControl-input.FormControl-error,.FormControl-select.FormControl-error,.FormControl-textarea.FormControl-error{border-color:var(--control-borderColor-danger,var(--color-danger-emphasis))}.FormControl-input.FormControl-success,.FormControl-select.FormControl-success,.FormControl-textarea.FormControl-success{border-color:var(--control-borderColor-success,var(--color-success-emphasis))}.FormControl-input.FormControl-warning,.FormControl-select.FormControl-warning,.FormControl-textarea.FormControl-warning{border-color:var(--control-borderColor-warning,var(--color-attention-emphasis))}.FormControl-toggleSwitchInput{align-items:flex-start;display:flex;gap:var(--base-size-16,1rem)}.FormControl-input-wrap{display:grid;position:relative}.FormControl-input-wrap .FormControl-input-leadingVisualWrap{color:var(--fgColor-muted,var(--color-fg-muted));display:block;height:var(--base-size-16,1rem);left:var(--base-size-8,.5rem);pointer-events:none;position:absolute;top:var(--base-size-8,.5rem);width:var(--base-size-16,1rem)}.FormControl-input-wrap .FormControl-input-leadingVisualWrap .FormControl-input-leadingVisual{display:block;-webkit-user-select:none;user-select:none}.FormControl-input-wrap .FormControl-input-trailingAction{align-items:center;background:#0000;border:0;border-radius:var(--borderRadius-small,3px);color:var(--fgColor-muted,var(--color-fg-muted));cursor:pointer;display:grid;height:var(--control-xsmall-size,1.5rem);justify-content:center;padding:0;position:absolute;right:var(--base-size-4,.25rem);top:var(--base-size-4,.25rem);transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;width:var(--control-xsmall-size,1.5rem);z-index:4}.FormControl-input-wrap .FormControl-input-trailingAction svg{-webkit-user-select:none;user-select:none}.FormControl-input-wrap .FormControl-input-trailingAction[disabled]{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));pointer-events:none}.FormControl-input-wrap .FormControl-input-trailingAction:hover{background:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.FormControl-input-wrap .FormControl-input-trailingAction:active{background:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}.FormControl-input-wrap .FormControl-input-trailingAction.FormControl-input-trailingAction--divider:before{background:var(--borderColor-default,var(--color-border-default));content:"";display:block;height:var(--base-size-16,1rem);left:calc(var(--base-size-4,.25rem)*-1);position:absolute;top:calc((var(--control-xsmall-size,1.5rem) - var(--base-size-16,1rem))/2);width:var(--borderWidth-thin,max(1px,.0625rem))}.FormControl-input-wrap .FormControl-input-trailingAction:after{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem) var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:coarse){.FormControl-input-wrap .FormControl-input-trailingAction:after{min-height:var(--control-minTarget-coarse,2.75rem);min-width:var(--control-minTarget-coarse,2.75rem)}}.FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input{padding-inline-start:calc(var(--control-medium-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-medium-gap,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--trailingAction .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-medium-gap,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-medium-gap,.5rem) + var(--borderWidth-thin,max(1px, .0625rem)))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-leadingVisualWrap{left:calc(var(--control-medium-paddingInline-condensed,.5rem) - .125rem);top:calc(var(--control-medium-paddingInline-condensed,.5rem) - .125rem)}.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-small{padding-inline-end:calc(var(--control-small-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-small-gap,.25rem))}.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-small{padding-inline-end:calc(var(--control-small-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-small-gap,.25rem) + var(--borderWidth-thin,max(1px, .0625rem)))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction{height:calc(var(--control-small-size,1.75rem) - var(--base-size-8,.5rem));width:calc(var(--control-small-size,1.75rem) - var(--base-size-8,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction:before{top:calc((var(--control-xsmall-size,1.5rem) - var(--base-size-16,1rem))/4)}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-leadingVisualWrap{left:var(--control-medium-paddingInline-normal,.75rem);top:var(--control-medium-paddingInline-normal,.75rem)}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large{padding-inline-start:calc(var(--control-large-paddingInline-normal,.75rem) + var(--base-size-16,1rem) + var(--control-large-gap,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-large{padding-inline-end:calc(var(--control-large-paddingInline-normal,.75rem) + var(--base-size-16,1rem) + var(--control-large-gap,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-large{padding-inline-end:calc(var(--control-large-paddingInline-normal,.75rem) + var(--base-size-16,1rem) + var(--control-large-gap,.5rem) + var(--borderWidth-thin,max(1px, .0625rem)))}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction{height:var(--control-small-size,1.75rem);right:calc(var(--control-medium-paddingInline-condensed,.5rem) - .125rem);top:calc(var(--control-medium-paddingInline-condensed,.5rem) - .125rem);width:var(--control-small-size,1.75rem)}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction:before{height:var(--base-size-20,1.25rem);top:unset}.FormControl-select-wrap{display:grid;grid-template-columns:minmax(0,auto) var(--base-size-16,1rem)}.FormControl-select-wrap:after{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));content:"";grid-column:2;grid-row:1;height:var(--base-size-16,1rem);-webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiM1ODYwNjkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuNDI3IDkuNDI3IDMuMzk2IDMuMzk2YS4yNTEuMjUxIDAgMCAwIC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwIDAgMTEuMzk2IDlINC42MDRhLjI1LjI1IDAgMCAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3IDcuODIgMy4wNzJhLjI1LjI1IDAgMCAxIC4zNTQgMEwxMS41NyA2LjQ3YS4yNS4yNSAwIDAgMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMCAxLS4xNzctLjQyN3oiLz48L3N2Zz4=");mask:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiM1ODYwNjkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuNDI3IDkuNDI3IDMuMzk2IDMuMzk2YS4yNTEuMjUxIDAgMCAwIC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwIDAgMTEuMzk2IDlINC42MDRhLjI1LjI1IDAgMCAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3IDcuODIgMy4wNzJhLjI1LjI1IDAgMCAxIC4zNTQgMEwxMS41NyA2LjQ3YS4yNS4yNSAwIDAgMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMCAxLS4xNzctLjQyN3oiLz48L3N2Zz4=");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;padding-right:var(--base-size-4,.25rem);place-self:center end;pointer-events:none;width:var(--base-size-16,1rem)}.FormControl-select-wrap .FormControl-select{-webkit-appearance:none;appearance:none;grid-column:1/-1;grid-row:1;padding-right:var(--base-size-20,1.25rem)}.FormControl-checkbox-wrap,.FormControl-radio-wrap{display:inline-grid;gap:var(--base-size-8,.5rem);grid-template-columns:min-content auto}.FormControl-checkbox-wrap .FormControl-checkbox-labelWrap,.FormControl-checkbox-wrap .FormControl-radio-labelWrap,.FormControl-radio-wrap .FormControl-checkbox-labelWrap,.FormControl-radio-wrap .FormControl-radio-labelWrap{display:flex;flex-direction:column;gap:var(--base-size-4,.25rem)}.FormControl-checkbox-wrap .FormControl-label,.FormControl-radio-wrap .FormControl-label{cursor:pointer}.FormControl-check-group-wrap fieldset,.FormControl-radio-group-wrap fieldset{border:0;margin:0;padding:0}input[type=checkbox].FormControl-checkbox{background-color:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--control-borderColor-rest,var(--color-border-default));color:var(--fgColor-default,var(--color-fg-default))}input.FormControl-checkbox[type=checkbox][disabled]{-webkit-text-fill-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg));border-color:var(--control-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed;opacity:1}input.FormControl-checkbox[type=checkbox][invalid]:not(:focus){border-color:var(--control-borderColor-danger,var(--color-danger-emphasis))}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}input[type=checkbox].FormControl-checkbox{-webkit-appearance:none;appearance:none;border-color:var(--control-borderColor-emphasis,var(--color-switch-knob-border));border-radius:var(--borderRadius-small,3px);cursor:pointer;display:grid;height:var(--base-size-16,1rem);margin:.125rem 0 0;place-content:center;position:relative;transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);width:var(--base-size-16,1rem)}input.FormControl-checkbox[type=checkbox]:before{background-color:var(--control-checked-fgColor-rest,var(--color-switch-track-checked-fg));clip-path:inset(var(--base-size-16,1rem) 0 0 0);content:"";height:var(--base-size-16,1rem);-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjc4LjIyYS43NS43NSAwIDAgMSAwIDEuMDYxTDQuNTIgOC41NDFhLjc1Mi43NTIgMCAwIDEtMS4wNjIgMEwuMjAyIDUuMjg1YS43NS43NSAwIDAgMSAxLjA2MS0xLjA2MWwyLjcyNSAyLjcyM0wxMC43MTguMjJhLjc1MS43NTEgMCAwIDEgMS4wNjIgMFoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjc4LjIyYS43NS43NSAwIDAgMSAwIDEuMDYxTDQuNTIgOC41NDFhLjc1Mi43NTIgMCAwIDEtMS4wNjIgMEwuMjAyIDUuMjg1YS43NS43NSAwIDAgMSAxLjA2MS0xLjA2MWwyLjcyNSAyLjcyM0wxMC43MTguMjJhLjc1MS43NTEgMCAwIDEgMS4wNjIgMFoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:75%;mask-size:75%;transition:visibility 0s linear .23s;visibility:hidden;width:var(--base-size-16,1rem)}@media screen and (prefers-reduced-motion:no-preference){input.FormControl-checkbox[type=checkbox]:before{animation:checkmarkOut 80ms cubic-bezier(.65,0,.35,1) forwards}}input.FormControl-checkbox[type=checkbox]:after{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem) var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-checkbox-labelWrap .FormControl-label,input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-radio-labelWrap .FormControl-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed}input.FormControl-checkbox[type=checkbox]:checked{background:var(--control-checked-bgColor-rest,var(--color-accent-fg));border-color:var(--control-checked-borderColor-rest,var(--color-accent-fg));transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0ms}input.FormControl-checkbox[type=checkbox]:checked:before{transition:visibility 0s linear 0s;visibility:visible}@media screen and (prefers-reduced-motion:no-preference){input.FormControl-checkbox[type=checkbox]:checked:before{animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards}}input.FormControl-checkbox[type=checkbox]:checked:disabled{background-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));border-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed;opacity:1}input.FormControl-checkbox[type=checkbox]:checked:disabled:before{background-color:var(--control-checked-fgColor-rest,var(--color-switch-track-checked-fg))}@media (forced-colors:active){input.FormControl-checkbox[type=checkbox]:checked{background-color:canvastext;border-color:canvastext}}input.FormControl-checkbox[type=checkbox]:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:2px}input.FormControl-checkbox[type=checkbox]:indeterminate:before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAgMWExIDEgMCAwIDEgMS0xaDhhMSAxIDAgMSAxIDAgMkgxYTEgMSAwIDAgMS0xLTFaIiBmaWxsPSIjZmZmIi8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAgMWExIDEgMCAwIDEgMS0xaDhhMSAxIDAgMSAxIDAgMkgxYTEgMSAwIDAgMS0xLTFaIiBmaWxsPSIjZmZmIi8+PC9zdmc+");visibility:visible}input[type=radio].FormControl-radio{background-color:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--control-borderColor-rest,var(--color-border-default));color:var(--fgColor-default,var(--color-fg-default))}input.FormControl-radio[type=radio][disabled]{-webkit-text-fill-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg));border-color:var(--control-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed;opacity:1}input.FormControl-radio[type=radio][invalid]:not(:focus){border-color:var(--control-borderColor-danger,var(--color-danger-emphasis))}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}input[type=radio].FormControl-radio{-webkit-appearance:none;appearance:none;border-color:var(--control-borderColor-emphasis,var(--color-switch-knob-border));border-radius:var(--borderRadius-full,9999px);cursor:pointer;height:var(--base-size-16,1rem);margin:.125rem 0 0;position:relative;transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);width:var(--base-size-16,1rem)}input.FormControl-radio[type=radio]:after{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem) var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}input.FormControl-radio[type=radio]:checked{border-color:var(--control-checked-borderColor-rest,var(--color-accent-fg));border-width:var(--base-size-4,.25rem)}input.FormControl-radio[type=radio]:checked:disabled{border-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed}input.FormControl-radio[type=radio]:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:2px}@media (forced-colors:active){input[type=radio].FormControl-radio{background-color:canvastext;border-color:canvastext}}@keyframes checkmarkIn{0%{clip-path:inset(var(--base-size-16,1rem) 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(var(--base-size-16,1rem) 0 0 0)}}

data/app/components/primer/alpha/text_field.css.json

@@ -0,0 +1,135 @@
+{
+  "name": "alpha/text_field",
+  "selectors": [
+    ".FormControl",
+    ".FormControl--fullWidth",
+    ".FormControl-label",
+    ".FormControl-caption",
+    ".FormControl-inlineValidation",
+    ".FormControl-inlineValidation p",
+    ".FormControl-inlineValidation--visual",
+    ".FormControl-spacingWrapper",
+    ".FormControl-horizontalGroup",
+    ".FormControl-input",
+    ".FormControl-select",
+    ".FormControl-textarea",
+    ".FormControl-input[disabled]",
+    ".FormControl-select[disabled]",
+    ".FormControl-textarea[disabled]",
+    ".FormControl-input[invalid]:not(:focus)",
+    ".FormControl-select[invalid]:not(:focus)",
+    ".FormControl-textarea[invalid]:not(:focus)",
+    ".FormControl-input:not([type=checkbox],[type=radio]):focus",
+    ".FormControl-select:not([type=checkbox],[type=radio]):focus",
+    ".FormControl-textarea:not([type=checkbox],[type=radio]):focus",
+    ".FormControl-input:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
+    ".FormControl-select:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
+    ".FormControl-textarea:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
+    ".FormControl-input:not([type=checkbox],[type=radio]):focus-visible",
+    ".FormControl-select:not([type=checkbox],[type=radio]):focus-visible",
+    ".FormControl-textarea:not([type=checkbox],[type=radio]):focus-visible",
+    ".FormControl-input[disabled]::placeholder",
+    ".FormControl-select[disabled]::placeholder",
+    ".FormControl-textarea[disabled]::placeholder",
+    ".FormControl-input[readonly]",
+    ".FormControl-select[readonly]",
+    ".FormControl-textarea[readonly]",
+    ".FormControl-input::placeholder",
+    ".FormControl-select::placeholder",
+    ".FormControl-textarea::placeholder",
+    ".FormControl-input.FormControl-small",
+    ".FormControl-select.FormControl-small",
+    ".FormControl-textarea.FormControl-small",
+    ".FormControl-input.FormControl-medium",
+    ".FormControl-select.FormControl-medium",
+    ".FormControl-textarea.FormControl-medium",
+    ".FormControl-input.FormControl-large",
+    ".FormControl-select.FormControl-large",
+    ".FormControl-textarea.FormControl-large",
+    ".FormControl-input.FormControl-inset",
+    ".FormControl-select.FormControl-inset",
+    ".FormControl-textarea.FormControl-inset",
+    ".FormControl-input.FormControl-inset:focus",
+    ".FormControl-input.FormControl-inset:focus-visible",
+    ".FormControl-select.FormControl-inset:focus",
+    ".FormControl-select.FormControl-inset:focus-visible",
+    ".FormControl-textarea.FormControl-inset:focus",
+    ".FormControl-textarea.FormControl-inset:focus-visible",
+    ".FormControl-input.FormControl-monospace",
+    ".FormControl-select.FormControl-monospace",
+    ".FormControl-textarea.FormControl-monospace",
+    ".FormControl-input.FormControl-error",
+    ".FormControl-select.FormControl-error",
+    ".FormControl-textarea.FormControl-error",
+    ".FormControl-input.FormControl-success",
+    ".FormControl-select.FormControl-success",
+    ".FormControl-textarea.FormControl-success",
+    ".FormControl-input.FormControl-warning",
+    ".FormControl-select.FormControl-warning",
+    ".FormControl-textarea.FormControl-warning",
+    ".FormControl-toggleSwitchInput",
+    ".FormControl-input-wrap",
+    ".FormControl-input-wrap .FormControl-input-leadingVisualWrap",
+    ".FormControl-input-wrap .FormControl-input-leadingVisualWrap .FormControl-input-leadingVisual",
+    ".FormControl-input-wrap .FormControl-input-trailingAction",
+    ".FormControl-input-wrap .FormControl-input-trailingAction svg",
+    ".FormControl-input-wrap .FormControl-input-trailingAction[disabled]",
+    ".FormControl-input-wrap .FormControl-input-trailingAction:hover",
+    ".FormControl-input-wrap .FormControl-input-trailingAction:active",
+    ".FormControl-input-wrap .FormControl-input-trailingAction.FormControl-input-trailingAction--divider:before",
+    ".FormControl-input-wrap .FormControl-input-trailingAction:after",
+    ".FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input",
+    ".FormControl-input-wrap.FormControl-input-wrap--trailingAction .FormControl-input",
+    ".FormControl-input-wrap.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input",
+    ".FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-leadingVisualWrap",
+    ".FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-small",
+    ".FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-small",
+    ".FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction",
+    ".FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction:before",
+    ".FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-leadingVisualWrap",
+    ".FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large",
+    ".FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-large",
+    ".FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-large",
+    ".FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction",
+    ".FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction:before",
+    ".FormControl-select-wrap",
+    ".FormControl-select-wrap:after",
+    ".FormControl-select-wrap .FormControl-select",
+    ".FormControl-checkbox-wrap",
+    ".FormControl-radio-wrap",
+    ".FormControl-checkbox-wrap .FormControl-checkbox-labelWrap",
+    ".FormControl-checkbox-wrap .FormControl-radio-labelWrap",
+    ".FormControl-radio-wrap .FormControl-checkbox-labelWrap",
+    ".FormControl-radio-wrap .FormControl-radio-labelWrap",
+    ".FormControl-checkbox-wrap .FormControl-label",
+    ".FormControl-radio-wrap .FormControl-label",
+    ".FormControl-check-group-wrap fieldset",
+    ".FormControl-radio-group-wrap fieldset",
+    "input[type=checkbox].FormControl-checkbox",
+    "input.FormControl-checkbox[type=checkbox][disabled]",
+    "input.FormControl-checkbox[type=checkbox][invalid]:not(:focus)",
+    "input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus",
+    "input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
+    "input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus-visible",
+    "input.FormControl-checkbox[type=checkbox]:before",
+    "input.FormControl-checkbox[type=checkbox]:after",
+    "input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-checkbox-labelWrap .FormControl-label",
+    "input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-radio-labelWrap .FormControl-label",
+    "input.FormControl-checkbox[type=checkbox]:checked",
+    "input.FormControl-checkbox[type=checkbox]:checked:before",
+    "input.FormControl-checkbox[type=checkbox]:checked:disabled",
+    "input.FormControl-checkbox[type=checkbox]:checked:disabled:before",
+    "input.FormControl-checkbox[type=checkbox]:focus-visible",
+    "input.FormControl-checkbox[type=checkbox]:indeterminate:before",
+    "input[type=radio].FormControl-radio",
+    "input.FormControl-radio[type=radio][disabled]",
+    "input.FormControl-radio[type=radio][invalid]:not(:focus)",
+    "input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus",
+    "input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
+    "input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus-visible",
+    "input.FormControl-radio[type=radio]:after",
+    "input.FormControl-radio[type=radio]:checked",
+    "input.FormControl-radio[type=radio]:checked:disabled",
+    "input.FormControl-radio[type=radio]:focus-visible"
+  ]
+}