pulse_view_components 0.3.0

data/app/assets/images/pulse_view_components/icons/tag.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z"/></svg>

data/app/assets/images/pulse_view_components/icons/tasklist.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M2 2h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1Zm4.655 8.595a.75.75 0 0 1 0 1.06L4.03 14.28a.75.75 0 0 1-1.06 0l-1.5-1.5a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l.97.97 2.095-2.095a.75.75 0 0 1 1.06 0ZM9.75 2.5h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1 0-1.5Zm0 5h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1 0-1.5Zm0 5h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1 0-1.5Zm-7.25-9v3h3v-3Z"/></svg>

data/app/assets/images/pulse_view_components/icons/telescope.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M14.184 1.143v-.001l1.422 2.464a1.75 1.75 0 0 1-.757 2.451L3.104 11.713a1.75 1.75 0 0 1-2.275-.702l-.447-.775a1.75 1.75 0 0 1 .53-2.32L11.682.573a1.748 1.748 0 0 1 2.502.57Zm-4.709 9.32h-.001l2.644 3.863a.75.75 0 1 1-1.238.848l-1.881-2.75v2.826a.75.75 0 0 1-1.5 0v-2.826l-1.881 2.75a.75.75 0 1 1-1.238-.848l2.049-2.992a.746.746 0 0 1 .293-.253l1.809-.87a.749.749 0 0 1 .944.252ZM9.436 3.92h-.001l-4.97 3.39.942 1.63 5.42-2.61Zm3.091-2.108h.001l-1.85 1.26 1.505 2.605 2.016-.97a.247.247 0 0 0 .13-.151.247.247 0 0 0-.022-.199l-1.422-2.464a.253.253 0 0 0-.161-.119.254.254 0 0 0-.197.038ZM1.756 9.157a.25.25 0 0 0-.075.33l.447.775a.25.25 0 0 0 .325.1l1.598-.769-.83-1.436-1.465 1Z"/></svg>

data/app/assets/images/pulse_view_components/icons/three-bars.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M1 2.75A.75.75 0 0 1 1.75 2h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 2.75Zm0 5A.75.75 0 0 1 1.75 7h12.5a.75.75 0 0 1 0 1.5H1.75A.75.75 0 0 1 1 7.75ZM1.75 12h12.5a.75.75 0 0 1 0 1.5H1.75a.75.75 0 0 1 0-1.5Z"></path></svg>

data/app/assets/images/pulse_view_components/icons/thumbsdown.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M7.653 15.369a.75.75 0 0 1-.776.371l-.238-.04a3.25 3.25 0 0 1-2.591-4.099L4.506 10h-.665A3.25 3.25 0 0 1 .723 5.833l1.135-3.859A2.75 2.75 0 0 1 4.482 0H9.43c.78.003 1.538.25 2.168.702A1.752 1.752 0 0 1 12.989 0h1.272A1.75 1.75 0 0 1 16 1.75v6.5A1.75 1.75 0 0 1 14.25 10h-3.417a.25.25 0 0 0-.217.127ZM11.25 2.351l-.396-.33a2.248 2.248 0 0 0-1.44-.521H4.496a1.25 1.25 0 0 0-1.199.897L2.162 6.256A1.75 1.75 0 0 0 3.841 8.5H5.5a.75.75 0 0 1 .721.956l-.731 2.558a1.75 1.75 0 0 0 1.127 2.14L9.31 9.389a1.75 1.75 0 0 1 1.523-.889h.417Zm1.5 6.149h1.5a.25.25 0 0 0 .25-.25v-6.5a.25.25 0 0 0-.25-.25H13a.25.25 0 0 0-.25.25Z"/></svg>

data/app/assets/images/pulse_view_components/icons/thumbsup.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M8.347.631A.75.75 0 0 1 9.123.26l.238.04a3.25 3.25 0 0 1 2.591 4.098L11.494 6h.665a3.25 3.25 0 0 1 3.118 4.167l-1.135 3.859A2.751 2.751 0 0 1 11.503 16H6.586a3.75 3.75 0 0 1-2.184-.702A1.75 1.75 0 0 1 3 16H1.75A1.75 1.75 0 0 1 0 14.25v-6.5C0 6.784.784 6 1.75 6h3.417a.25.25 0 0 0 .217-.127ZM4.75 13.649l.396.33c.404.337.914.521 1.44.521h4.917a1.25 1.25 0 0 0 1.2-.897l1.135-3.859A1.75 1.75 0 0 0 12.159 7.5H10.5a.75.75 0 0 1-.721-.956l.731-2.558a1.75 1.75 0 0 0-1.127-2.14L6.69 6.611a1.75 1.75 0 0 1-1.523.889H4.75ZM3.25 7.5h-1.5a.25.25 0 0 0-.25.25v6.5c0 .138.112.25.25.25H3a.25.25 0 0 0 .25-.25Z"/></svg>

data/app/assets/images/pulse_view_components/icons/tools.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M5.433 2.304A4.492 4.492 0 0 0 3.5 6c0 1.598.832 3.002 2.09 3.802.518.328.929.923.902 1.64v.008l-.164 3.337a.75.75 0 1 1-1.498-.073l.163-3.33c.002-.085-.05-.216-.207-.316A5.996 5.996 0 0 1 2 6a5.993 5.993 0 0 1 2.567-4.92 1.482 1.482 0 0 1 1.673-.04c.462.296.76.827.76 1.423v2.82c0 .082.041.16.11.206l.75.51a.25.25 0 0 0 .28 0l.75-.51A.249.249 0 0 0 9 5.282V2.463c0-.596.298-1.127.76-1.423a1.482 1.482 0 0 1 1.673.04A5.993 5.993 0 0 1 14 6a5.996 5.996 0 0 1-2.786 5.068c-.157.1-.209.23-.207.315l.163 3.33a.752.752 0 0 1-1.094.714.75.75 0 0 1-.404-.64l-.164-3.345c-.027-.717.384-1.312.902-1.64A4.495 4.495 0 0 0 12.5 6a4.492 4.492 0 0 0-1.933-3.696c-.024.017-.067.067-.067.16v2.818a1.75 1.75 0 0 1-.767 1.448l-.75.51a1.75 1.75 0 0 1-1.966 0l-.75-.51A1.75 1.75 0 0 1 5.5 5.282V2.463c0-.092-.043-.142-.067-.159Z"/></svg>

data/app/assets/images/pulse_view_components/icons/trash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.149l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z"></path></svg>

data/app/assets/images/pulse_view_components/icons/trophy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M3.217 6.962A3.75 3.75 0 0 1 0 3.25v-.5C0 1.784.784 1 1.75 1h1.356c.228-.585.796-1 1.462-1h6.864c.647 0 1.227.397 1.462 1h1.356c.966 0 1.75.784 1.75 1.75v.5a3.75 3.75 0 0 1-3.217 3.712 5.014 5.014 0 0 1-2.771 3.117l.144 1.446c.005.05.03.12.114.204.086.087.217.17.373.227.283.103.618.274.89.568.285.31.467.723.467 1.226v.75h1.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H4v-.75c0-.503.182-.916.468-1.226.27-.294.606-.465.889-.568.139-.048.266-.126.373-.227.084-.085.109-.153.114-.204l.144-1.446a5.015 5.015 0 0 1-2.77-3.117ZM4.5 1.568V5.5a3.5 3.5 0 1 0 7 0V1.568a.068.068 0 0 0-.068-.068H4.568a.068.068 0 0 0-.068.068Zm2.957 8.902-.12 1.204c-.093.925-.858 1.47-1.467 1.691a.766.766 0 0 0-.3.176c-.037.04-.07.093-.07.21v.75h5v-.75c0-.117-.033-.17-.07-.21a.766.766 0 0 0-.3-.176c-.609-.221-1.374-.766-1.466-1.69l-.12-1.204a5.064 5.064 0 0 1-1.087 0ZM13 2.5v2.872a2.25 2.25 0 0 0 1.5-2.122v-.5a.25.25 0 0 0-.25-.25H13Zm-10 0H1.75a.25.25 0 0 0-.25.25v.5c0 .98.626 1.813 1.5 2.122Z"/></svg>

data/app/assets/images/pulse_view_components/icons/undo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M1.22 6.28a.749.749 0 0 1 0-1.06l3.5-3.5a.749.749 0 1 1 1.06 1.06L3.561 5h7.188l.001.007L10.749 5c.058 0 .116.007.171.019A4.501 4.501 0 0 1 10.5 14H8.796a.75.75 0 0 1 0-1.5H10.5a3 3 0 1 0 0-6H3.561L5.78 8.72a.749.749 0 1 1-1.06 1.06l-3.5-3.5Z"/></svg>

data/app/assets/images/pulse_view_components/icons/unlink.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M12.914 5.914a2 2 0 0 0-2.828-2.828l-.837.837a.75.75 0 1 1-1.06-1.061l.836-.837a3.5 3.5 0 1 1 4.95 4.95l-.195.194a.75.75 0 0 1-1.06-1.06l.194-.195Zm-1.87 3.482a.759.759 0 0 1-.07.079c-.63.63-1.468 1.108-2.343 1.263-.89.159-1.86-.017-2.606-.763a.75.75 0 1 1 1.06-1.06c.329.327.767.438 1.284.347.493-.088 1.018-.36 1.445-.752l-1.247-.897a.709.709 0 0 1-.01-.008l-.295-.212c-.94-.597-1.984-.499-2.676.193l-2.5 2.5a2 2 0 1 0 2.828 2.828l.837-.836a.75.75 0 0 1 1.06 1.06l-.836.837a3.5 3.5 0 0 1-4.95-4.95l2.5-2.5a3.472 3.472 0 0 1 1.354-.848L2.312 3.109a.75.75 0 0 1 .876-1.218l5.93 4.27c.115.074.226.155.335.24l6.235 4.49a.75.75 0 0 1-.876 1.218l-3.768-2.713Z"/></svg>

data/app/assets/images/pulse_view_components/icons/upload.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M2.75 14A1.75 1.75 0 0 1 1 12.25v-2.5a.75.75 0 0 1 1.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 14Z"/><path d="M11.78 4.72a.749.749 0 1 1-1.06 1.06L8.75 3.811V9.5a.75.75 0 0 1-1.5 0V3.811L5.28 5.78a.749.749 0 1 1-1.06-1.06l3.25-3.25a.749.749 0 0 1 1.06 0l3.25 3.25Z"/></svg>

data/app/assets/images/pulse_view_components/icons/x-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M2.344 2.343h-.001a8 8 0 0 1 11.314 11.314A8.002 8.002 0 0 1 .234 10.089a8 8 0 0 1 2.11-7.746Zm1.06 10.253a6.5 6.5 0 1 0 9.108-9.275 6.5 6.5 0 0 0-9.108 9.275ZM6.03 4.97 8 6.94l1.97-1.97a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-1.97 1.97a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L6.94 8 4.97 6.03a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018Z"/></svg>

data/app/assets/images/pulse_view_components/icons/x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"/></svg>

data/app/assets/images/pulse_view_components/icons/zap.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M9.504.43a1.516 1.516 0 0 1 2.437 1.713L10.415 5.5h2.123c1.57 0 2.346 1.909 1.22 3.004l-7.34 7.142a1.249 1.249 0 0 1-.871.354h-.302a1.25 1.25 0 0 1-1.157-1.723L5.633 10.5H3.462c-1.57 0-2.346-1.909-1.22-3.004L9.503.429Zm1.047 1.074L3.286 8.571A.25.25 0 0 0 3.462 9H6.75a.75.75 0 0 1 .694 1.034l-1.713 4.188 6.982-6.793A.25.25 0 0 0 12.538 7H9.25a.75.75 0 0 1-.683-1.06l2.008-4.418.003-.006a.036.036 0 0 0-.004-.009l-.006-.006-.008-.001c-.003 0-.006.002-.009.004Z"/></svg>

data/app/assets/stylesheets/pulse_view_components/application.tailwind.css

@@ -0,0 +1,10 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --pulse-fgColor-onEmphasis: #ffffff;
+  --pulse-focus-outlineColor: theme("colors.blue.700");
+  --pulse-layout-sidebar-width: 220px;
+  --pulse-layout-gutter: 16px;
+}

data/app/components/pulse/action_list/divider.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Pulse
+  class ActionList
+    # Separator with optional text rendered above groups or between individual items.
+    class Divider < Pulse::Component
+      DEFAULT_SCHEME = :subtle
+      SCHEME_MAPPINGS = {
+        DEFAULT_SCHEME => nil,
+        :filled => 'pulse-border-t-color-gray pulse-border-b-color-gray ' \
+                   'pulse-border-y-solid empty:pulse-h-2 empty:pulse-box-border'
+      }.freeze
+      SCHEME_OPTIONS = SCHEME_MAPPINGS.keys.freeze
+
+      # @param scheme [Symbol] Display a background color if scheme is `filled`.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(scheme: DEFAULT_SCHEME, **system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = :li
+        @system_arguments[:role] = :presentation
+        @system_arguments[:'aria-hidden'] = true
+        @scheme = fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)
+        @system_arguments[:classes] = merge_classes(
+          'pulse-block pulse-h-[1px] pulse-p-0 pulse-border-0 pulse-ms-2 ',
+          'pulse-me-2 pulse-bg-gray-100',
+          SCHEME_MAPPINGS[@scheme]
+        )
+      end
+
+      def call
+        render(Pulse::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end

data/app/components/pulse/action_list/form_wrapper.html.slim

@@ -0,0 +1,9 @@
+- if form_required?
+  = form_with(url: @action, method: @http_method, **@form_arguments) do
+    - if render_input?
+      = render Pulse::BaseComponent.new(tag: :input, **@input_arguments)
+
+    = content
+
+- else
+  = content

data/app/components/pulse/action_list/form_wrapper.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module Pulse
+  class ActionList
+    # Utility component for wrapping ActionLists or individual `ActionList::Item`s in forms.
+    class FormWrapper < Pulse::Component
+      DEFAULT_HTTP_METHOD = :get
+      HTTP_METHOD_OPTIONS = [
+        DEFAULT_HTTP_METHOD,
+        :post,
+        :patch,
+        :put,
+        :delete,
+        :head
+      ].freeze
+
+      def initialize(list:, action: nil, **form_arguments)
+        @list = list
+        @form_arguments = form_arguments
+
+        @action = action
+        @http_method = extract_http_method(@form_arguments)
+
+        name = @form_arguments.delete(:name)
+        value = @form_arguments.delete(:value) || name
+
+        @input_arguments = {
+          type: :hidden,
+          name:,
+          value:,
+          data: { list_item_input: true },
+          **(@form_arguments.delete(:input_arguments) || {})
+        }
+      end
+
+      def get?
+        @http_method == :get
+      end
+
+      def form_required?
+        @action && !get?
+      end
+
+      def render_input?
+        @input_arguments[:name].present?
+      end
+
+      private
+
+      def extract_http_method(args)
+        if (http_method = args.delete(:method))
+          if HTTP_METHOD_OPTIONS.include?(http_method)
+            http_method
+          else
+            DEFAULT_HTTP_METHOD
+          end
+        else
+          DEFAULT_HTTP_METHOD
+        end
+      end
+    end
+  end
+end

data/app/components/pulse/action_list/heading.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Pulse
+  class ActionList
+    # Heading used to describe each sub list within an action list.
+    class Heading < Pulse::Component
+      DEFAULT_SCHEME = :subtle
+      SCHEME_MAPPINGS = {
+        DEFAULT_SCHEME => nil,
+        :filled => 'ActionList-sectionDivider--filled'
+      }.freeze
+      SCHEME_OPTIONS = SCHEME_MAPPINGS.keys.freeze
+      HEADING_MIN = 1
+      HEADING_MAX = 6
+      HEADING_LEVELS = (HEADING_MIN..HEADING_MAX).to_a.freeze
+
+      attr_reader :title_id, :subtitle_id
+
+      # @param title [String] Sub list title.
+      # @param heading_level [Integer] Heading level. Level 2 results in an `<h2>` tag, level 3 an `<h3>` tag, etc.
+      # @param subtitle [String] Optional sub list description.
+      # @param scheme [Symbol] Display a background color if scheme is `filled`.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(title:, heading_level: 3, scheme: DEFAULT_SCHEME,
+                     subtitle: nil, **system_arguments)
+        unless HEADING_LEVELS.include?(heading_level)
+          raise "Heading level must be between #{HEADING_MIN} and " \
+                "#{HEADING_MAX}"
+        end
+
+        @heading_level = heading_level
+        @tag = :"h#{heading_level}"
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @title = title
+        @subtitle = subtitle
+        @scheme = fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)
+        @system_arguments[:classes] = class_names(
+          'ActionList-sectionDivider',
+          SCHEME_MAPPINGS[@scheme],
+          @system_arguments[:classes]
+        )
+
+        @title_id = self.class.generate_id(base_name: 'heading-title')
+        @subtitle_id = self.class.generate_id(base_name: 'heading-subtitle')
+      end
+
+      def subtitle?
+        @subtitle.present?
+      end
+    end
+  end
+end

data/app/components/pulse/action_list/item.html.slim

@@ -0,0 +1,43 @@
+/! components/pulse/action_list/item
+= render(Pulse::BaseComponent.new(tag: :li, **@system_arguments)) do
+  = render(@form_wrapper) do
+    = render(Pulse::BaseComponent.new(**@content_arguments)) do
+      - if private_leading_action_icon
+        span class="pulse-fill-gray-900"
+          = private_leading_action_icon
+
+      - if list.select_variant == :single || list.select_variant == :multiple
+        span class="pulse-fill-gray-900"
+          = render(Pulse::Icon.new(icon: :check, width: 16, height: 16, classes: "ActionListItem-singleSelectCheckmark"))
+
+      - elsif list.select_variant == :multiple_checkbox
+        span class="pulse-fill-gray-900"
+          svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="ActionListItem-multiSelectIcon"
+            rect x="2" y="2" width="12" height="12" rx="4" class="ActionListItem-multiSelectIconRect"
+            path fill-rule="evenodd" d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z" class="ActionListItem-multiSelectCheckmark"
+
+      - if leading_visual
+        span class="pulse-fill-gray-900"
+          = leading_visual
+
+      = render(Pulse::ConditionalWrapper.new(condition: description?, tag: :span, **@description_wrapper_arguments)) do
+        = render(Pulse::BaseComponent.new(tag: :span, **@label_arguments)) do
+          = @label || content
+
+        - if description?
+          span class="ActionListItem-description"
+            = description
+
+      - if trailing_visual
+        span class="pulse-fill-gray-100 ActionListItem-visual--trailing"
+          = trailing_visual
+
+      - if private_trailing_action_icon
+        span class="pulse-fill-gray-100 ActionListItem-action--trailing"
+          = private_trailing_action_icon
+
+  = tooltip
+  - if trailing_action
+    = trailing_action
+
+  = private_content

data/app/components/pulse/action_list/item.rb

@@ -0,0 +1,319 @@
+# frozen_string_literal: true
+
+module Pulse
+  class ActionList
+    # An individual `ActionList` item. Items can optionally include leading and/or trailing visuals,
+    # such as icons, avatars, and counters.
+    class Item < Pulse::Component
+      DEFAULT_SIZE = :medium
+      SIZE_MAPPINGS = {
+        DEFAULT_SIZE => nil
+        # :large => "ActionListContent--sizeLarge",
+        # :xlarge => "ActionListContent--sizeXLarge"
+      }.freeze
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys.freeze
+
+      DEFAULT_DESCRIPTION_SCHEME = :block
+      DESCRIPTION_SCHEME_MAPPINGS = {
+        :inline => 'ActionListItem-descriptionWrap--inline',
+        DEFAULT_DESCRIPTION_SCHEME => 'ActionListItem-descriptionWrap'
+      }.freeze
+      DESCRIPTION_SCHEME_OPTIONS = DESCRIPTION_SCHEME_MAPPINGS.keys.freeze
+
+      DEFAULT_SCHEME = :default
+      SCHEME_MAPPINGS = {
+        DEFAULT_SCHEME => nil,
+        :danger => 'ActionListItem--danger'
+      }.freeze
+      SCHEME_OPTIONS = SCHEME_MAPPINGS.keys.freeze
+
+      # Description content that complements the item's label. See `ActionList`'s `description_scheme` argument
+      # for layout options.
+      renders_one :description
+
+      # An icon, avatar, SVG, or custom content that will render to the left of the label.
+      #
+      # To render an icon, call the `with_leading_visual_icon` method, which accepts the arguments accepted by <%= link_to_component(Pulse::Icon) %>.
+      #
+      # To render an SVG, call the `with_leading_visual_svg` method.
+      #
+      # To render custom content, call the `with_leading_visual_content` method and pass a block that returns a string.
+      renders_one :leading_visual, types: {
+        icon: lambda { |**system_arguments, &block|
+          deny_aria_key(
+            :label,
+            'Avoid using `aria-label` on leading visual icons, as they are ' \
+            'purely decorative.',
+            **system_arguments
+          )
+
+          Pulse::Icon.new(**system_arguments, &block)
+        },
+        avatar: lambda { |*|
+          return unless should_raise_error?
+
+          raise 'Leading visual avatars are no longer supported. Please use ' \
+                'the #with_avatar_item slot instead.'
+        },
+        svg: lambda { |**system_arguments|
+          Pulse::BaseComponent.new(tag: :svg, width: '16', height: '16',
+                                   **system_arguments)
+        },
+        content: lambda { |**system_arguments|
+          Pulse::BaseComponent.new(tag: :span, **system_arguments)
+        },
+        raw_content: nil
+      }
+
+      # Used internally.
+      #
+      # @private
+      renders_one :private_leading_action_icon, Pulse::Icon
+
+      # An icon, label, counter, or text to render to the right of the label.
+      #
+      # To render an icon, call the `with_leading_visual_icon` method, which accepts the arguments accepted by <%= link_to_component(Pulse::Icon) %>.
+      #
+      # To render a label, call the `with_leading_visual_label` method, which accepts the arguments accepted by <%= link_to_component(Pulse::Label) %>.
+      #
+      # To render a counter, call the `with_leading_visual_counter` method, which accepts the arguments accepted by <%= link_to_component(Pulse::Counter) %>.
+      #
+      # To render text, call the `with_leading_visual_text` method and pass a block that returns a string. Eg:
+      # ```ruby
+      # with_leading_visual_text { "Text here" }
+      # ```
+      renders_one :trailing_visual, types: {
+        icon: Pulse::Icon,
+        label: Pulse::Label,
+        counter: Pulse::Counter,
+        text: ->(text) { text }
+      }
+
+      # Used internally.
+      #
+      # @private
+      renders_one :private_trailing_action_icon, Pulse::Icon
+
+      # A button rendered after the trailing icon that can be used to show a menu, activate
+      # a dialog, etc.
+      #
+      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Pulse::IconButton) %>.
+      renders_one :trailing_action, lambda { |**system_arguments|
+        Pulse::IconButton.new(
+          scheme: :invisible,
+          classes: merge_classes(
+            system_arguments[:classes],
+            'ActionListItem-trailingAction'
+          ),
+
+          **system_arguments
+        )
+      }
+
+      # `Tooltip` that appears on mouse hover or keyboard focus over the trailing action button. Use tooltips sparingly and as
+      # a last resort. **Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be
+      # more appropriate. Consult the <%= link_to_component(Pulse::Tooltip) %> documentation for more information.
+      #
+      # @param type [Symbol] (:description) <%= one_of(Pulse::Tooltip::TYPE_OPTIONS) %>
+      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Pulse::Tooltip) %>.
+      renders_one :tooltip, lambda { |**system_arguments|
+        if @id.blank? && !Rails.env.production?
+          raise ArgumentError,
+                'Buttons with a tooltip must have a unique `id` set on ' \
+                'the `Button`.'
+        end
+
+        system_arguments[:for_id] = @id
+        system_arguments[:type] ||= :description
+
+        Pulse::Tooltip.new(**system_arguments)
+      }
+
+      # Used internally.
+      #
+      # @private
+      renders_one :private_content
+
+      attr_reader :id, :list, :href, :active, :disabled, :parent
+
+      # Whether or not this item is active.
+      #
+      # @return [Boolean]
+      alias active? active
+
+      # Whether or not this item is disabled.
+      #
+      # @return [Boolean]
+      alias disabled? disabled
+
+      # @param list [Pulse::ActionList] The list that contains this item. Used internally.
+      # @param parent [Pulse::ActionList::Item] This item's parent item. `nil` if this item is at the root. Used internally.
+      # @param label [String] Item label. If no label is provided, content is used.
+      # @param label_classes [String] CSS classes that will be added to the label.
+      # @param label_arguments [Hash] <%= link_to_system_arguments_docs %> used to construct the label.
+      # @param content_arguments [Hash] <%= link_to_system_arguments_docs %> used to construct the item's anchor or button tag.
+      # @param form_arguments [Hash] Allows the item to submit a form on click. The URL passed in the `href:` option will be used as the form action. Pass the `method:` option to this hash to control what kind of request is made, <%= one_of(Pulse::ActionList::FormWrapper::HTTP_METHOD_OPTIONS) %> The `name:` option is required and specifies the desired name of the field that will be included in the params sent to the server on form submission. Specify the `value:` option to send a custom value to the server; otherwise the value of `name:` is sent.
+      # @param truncate_label [Boolean] Truncate label with ellipsis.
+      # @param href [String] Link URL.
+      # @param role [String] ARIA role describing the function of the item.
+      # @param size [Symbol] Controls block sizing of the item.
+      # @param scheme [Symbol] Controls color/style based on behavior.
+      # @param disabled [Boolean] Disabled items are not clickable and visually dim.
+      # @param description_scheme [Symbol] Display description inline with label, or block on the next line. <%= one_of(Pulse::ActionList::Item::DESCRIPTION_SCHEME_OPTIONS) %>
+      # @param active [Boolean] If the parent list's `select_variant` is set to `:single` or `:multiple`, causes this item to render checked.
+      # @param on_click [String] JavaScript to execute when the item is clicked.
+      # @param id [String] Used internally.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(
+        list:,
+        label: nil,
+        label_classes: nil,
+        label_arguments: {},
+        content_arguments: {},
+        form_arguments: {},
+        parent: nil,
+        truncate_label: false,
+        href: nil,
+        role: nil,
+        size: DEFAULT_SIZE,
+        scheme: DEFAULT_SCHEME,
+        disabled: false,
+        description_scheme: DEFAULT_DESCRIPTION_SCHEME,
+        active: false,
+        on_click: nil,
+        id: self.class.generate_id,
+        **system_arguments
+      )
+        @list = list
+        @parent = parent
+        @label = label
+        @href = href || content_arguments[:href]
+        @truncate_label = truncate_label
+        @disabled = disabled
+        @active = active
+        @id = id
+        @system_arguments = system_arguments
+        @content_arguments = content_arguments
+        @form_wrapper = FormWrapper.new(list: @list, action: @href,
+                                        **form_arguments)
+
+        @size = fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)
+        @scheme = fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)
+        @description_scheme = fetch_or_fallback(
+          DESCRIPTION_SCHEME_OPTIONS,
+          description_scheme,
+          DEFAULT_DESCRIPTION_SCHEME
+        )
+
+        @system_arguments[:classes] = merge_classes(
+          @system_arguments[:classes],
+          SCHEME_MAPPINGS[@scheme],
+          'pulse-relative pulse-rounded selected:pulse-font-normal',
+          'ActionListItem--disabled' => @disabled
+        )
+
+        @system_arguments[:data] ||= {}
+        @system_arguments[:data][:targets] =
+          "#{list_class.custom_element_name}.items"
+
+        @label_arguments = {
+          **label_arguments,
+          classes: merge_classes(
+            label_classes,
+            label_arguments[:classes],
+            'pulse-font-semibold',
+            'ActionListItem-label--truncate' => @truncate_label
+          )
+        }
+
+        @content_arguments[:id] = @id
+        @content_arguments[:classes] = merge_classes(
+          @content_arguments[:classes],
+          'pulse-relative pulse-grid pulse-w-full pulse-text-start',
+          'pulse-select-none pulse-bg-transparent pulse-rounded',
+          'pulse-grid-rows-[min-content]',
+          'pulse-grid-cols-[min-content_min-content_minmax(0,auto)_min-content_min-content]', # rubocop:disable Layout/LineLength
+          'pulse-border-none hover:pulse-no-underline pulse-py-2',
+          'pulse-items-start pulse-gap-2 pulse-items-center',
+          SIZE_MAPPINGS[@size]
+        )
+
+        unless @content_arguments[:tag]
+          if @href && @form_wrapper.get? && !@disabled
+            @content_arguments[:tag] = :a
+            @content_arguments[:href] = @href
+          else
+            @content_arguments[:tag] = :button
+            @content_arguments[:type] =
+              @form_wrapper.form_required? ? :submit : :button
+            @content_arguments[:onclick] = on_click if on_click
+          end
+        end
+
+        if @content_arguments[:tag] != :button && @form_wrapper.form_required?
+          raise ArgumentError,
+                "items that submit forms must use a \"button\" tag instead " \
+                "of \"#{@content_arguments[:tag]}\""
+        end
+
+        if @content_arguments[:tag] != :button && @list.acts_as_form_input?
+          raise ArgumentError,
+                "items within lists/menus that act as form inputs must use " \
+                "\"button\" tags instead of \"#{@content_arguments[:tag]}\""
+        end
+        if @disabled
+          @content_arguments[:aria] ||= merge_aria(
+            @content_arguments,
+            { aria: { disabled: 'true' } }
+          )
+        end
+
+        @content_arguments[:role] =
+          role ||
+          if @list.allows_selection?
+            ActionList::SELECT_VARIANT_ROLE_MAP[@list.select_variant]
+          elsif @list.acts_as_menu?
+            ActionList::DEFAULT_MENU_ITEM_ROLE
+          end
+
+        @system_arguments[:role] = @list.acts_as_menu? ? :none : nil
+
+        @description_wrapper_arguments = {
+          classes: merge_classes(
+            'ActionListItem-descriptionWrap',
+            DESCRIPTION_SCHEME_MAPPINGS[@description_scheme]
+          )
+        }
+      end
+
+      private
+
+      def before_render
+        if @list.allows_selection?
+          @content_arguments[:aria] = merge_aria(
+            @content_arguments,
+            { aria: { checked: active? } }
+          )
+        end
+
+        @system_arguments[:classes] = merge_classes(
+          @system_arguments[:classes],
+          'ActionListItem--withActions' => trailing_action.present?
+        )
+
+        return unless leading_visual
+
+        @content_arguments[:classes] = merge_classes(
+          @content_arguments[:classes],
+          'pulse-pl-2' => leading_visual,
+          'ActionListContent--blockDescription' =>
+            description && @description_scheme == :block
+        )
+      end
+
+      def list_class
+        Pulse::ActionList
+      end
+    end
+  end
+end