pulse_view_components 0.3.0 → 0.4.0

data/app/components/pulse/layout.css

@@ -1,95 +1,96 @@
 /* Layout */
 
-@define-mixin flow-as-row {
+/*
+  Stacks the sidebar and main columns vertically. Applied below a breakpoint
+  by the media queries after `.Layout`. Tailwind 4 has no mixins, so this is a
+  custom utility pulled in with `@apply`.
+*/
+@utility layout-flow-row {
   grid-auto-flow: row;
   grid-template-columns: 1fr !important;
 
   & .Layout-sidebar,
   & .Layout-divider,
   & .Layout-main {
-    @apply pulse-w-full pulse-col-[1];
+    @apply pulse:w-full pulse:col-[1];
   }
 
   &.Layout--sidebarPosition-flowRow-start {
     & .Layout-sidebar {
-      @apply pulse-row-[1];
+      @apply pulse:row-[1];
     }
 
     & .Layout-main {
-      @apply pulse-row-[2_/_span_2];
+      @apply pulse:row-[2_/_span_2];
     }
   }
 
   &.Layout--sidebarPosition-flowRow-end {
     & .Layout-sidebar {
-      @apply pulse-row-[2_/_span_2];
+      @apply pulse:row-[2_/_span_2];
     }
 
     & .Layout-main {
-      @apply pulse-row-[1];
+      @apply pulse:row-[1];
     }
   }
 
   &.Layout--sidebarPosition-flowRow-none {
     & .Layout-sidebar {
-      @apply pulse-hidden;
+      @apply pulse:hidden;
     }
   }
 
   &.Layout--divided {
-    @mixin flow-as-row-divider;
+    --Layout-gutter: 0;
+
+    & .Layout-divider {
+      @apply pulse:h-px pulse:row-[2];
+
+      &.Layout-divider--flowRow-hidden {
+        @apply pulse:hidden;
+      }
+
+      &.Layout-divider--flowRow-shallow {
+        @apply pulse:h-2 pulse:border-[color:var(--borderColor-default)] pulse:[border-width:var(--borderWidth-thin)_0] pulse:mr-0 pulse:border-solid;
+        background: var(--bgColor-inset);
+      }
+    }
 
     & .Layout-main {
-      @apply pulse-row-[3_/_span_1];
+      @apply pulse:row-[3_/_span_1];
     }
 
     &.Layout--sidebarPosition-flowRow-end {
       & .Layout-sidebar {
-        @apply pulse-row-[3_/_span_1];
+        @apply pulse:row-[3_/_span_1];
       }
 
       & .Layout-main {
-        @apply pulse-row-[1];
+        @apply pulse:row-[1];
       }
     }
   }
 }
 
-@define-mixin flow-as-row-divider {
-  --Layout-gutter: 0;
-
-  & .Layout-divider {
-    @apply pulse-h-px pulse-row-[2];
-
-    &.Layout-divider--flowRow-hidden {
-      @apply pulse-hidden;
-    }
-
-    &.Layout-divider--flowRow-shallow {
-      @apply pulse-h-2 pulse-border-[color:var(--borderColor-default)] pulse-border-[var(--borderWidth-thin)_0] pulse-mr-0 pulse-border-solid;
-      background: var(--bgColor-inset);
-    }
-  }
-}
-
 .Layout {
-  @apply pulse-grid pulse-grid-flow-col pulse-grid-cols-[auto_0_minmax(0,calc(100%_-_var(--Layout-sidebar-width)_-_var(--Layout-gutter)))] pulse-gap-[var(--Layout-gutter)];
+  @apply pulse:grid pulse:grid-flow-col pulse:grid-cols-[auto_0_minmax(0,calc(100%_-_var(--Layout-sidebar-width)_-_var(--Layout-gutter)))] pulse:gap-[var(--Layout-gutter)];
   --Layout-sidebar-width: 220px;
   --Layout-gutter: 16px;
 }
 @media (max-width: calc(544px - 0.02px)) {
   .Layout {
-    @mixin flow-as-row;
+    @apply pulse:layout-flow-row;
   }
 }
 @media (max-width: calc(768px - 0.02px)) {
   .Layout.Layout--flowRow-until-md {
-    @mixin flow-as-row;
+    @apply pulse:layout-flow-row;
   }
 }
 @media (max-width: calc(1012px - 0.02px)) {
   .Layout.Layout--flowRow-until-lg {
-    @mixin flow-as-row;
+    @apply pulse:layout-flow-row;
   }
 }
 
@@ -97,13 +98,13 @@
 
 /* sidebar column, separator, main column */
 .Layout .Layout-sidebar {
-  @apply pulse-col-[1];
+  @apply pulse:col-[1];
 }
 .Layout .Layout-divider {
-  @apply pulse-hidden;
+  @apply pulse:hidden;
 }
 .Layout .Layout-main {
-  @apply pulse-col-[2_/_span_2];
+  @apply pulse:col-[2_/_span_2];
 }
 
 /* Gutter spacing */
@@ -171,43 +172,43 @@
 
 /* Sidebar position */
 .Layout.Layout--sidebarPosition-start .Layout-sidebar {
-  @apply pulse-col-[1];
+  @apply pulse:col-[1];
 }
 .Layout.Layout--sidebarPosition-start .Layout-main {
-  @apply pulse-col-[2_/_span_2];
+  @apply pulse:col-[2_/_span_2];
 }
 .Layout.Layout--sidebarPosition-end {
-  @apply pulse-grid-cols-[minmax(0,calc(100%_-_var(--Layout-sidebar-width)_-_var(--Layout-gutter)))_0_auto];
+  @apply pulse:grid-cols-[minmax(0,calc(100%_-_var(--Layout-sidebar-width)_-_var(--Layout-gutter)))_0_auto];
 }
 .Layout.Layout--sidebarPosition-end .Layout-main {
-  @apply pulse-col-[1];
+  @apply pulse:col-[1];
 }
 .Layout.Layout--sidebarPosition-end .Layout-sidebar {
-  @apply pulse-col-[2_/_span_2];
+  @apply pulse:col-[2_/_span_2];
 }
 
 /* Sidebar divider */
 .Layout.Layout--divided .Layout-divider {
-  @apply pulse-block pulse-col-[2] pulse-w-px -pulse-mr-px;
+  @apply pulse:block pulse:col-[2] pulse:w-px pulse:-mr-px;
   background: var(--borderColor-default);
 }
 .Layout.Layout--divided .Layout-main {
-  @apply pulse-col-[3_/_span_1];
+  @apply pulse:col-[3_/_span_1];
 }
 .Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar {
-  @apply pulse-col-[3_/_span_1];
+  @apply pulse:col-[3_/_span_1];
 }
 .Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main {
-  @apply pulse-col-[1];
+  @apply pulse:col-[1];
 }
 .Layout-divider {
-  @apply pulse-hidden pulse-w-px;
+  @apply pulse:hidden pulse:w-px;
 }
 .Layout-sidebar {
-  @apply pulse-w-[var(--Layout-sidebar-width)];
+  @apply pulse:w-[var(--Layout-sidebar-width)];
 }
 .Layout-main {
-  @apply pulse-min-w-0;
+  @apply pulse:min-w-0;
 }
 
 /* Centered main column
@@ -215,7 +216,7 @@
 .Layout-main .Layout-main-centered-md,
 .Layout-main .Layout-main-centered-lg,
 .Layout-main .Layout-main-centered-xl {
-  @apply pulse-mx-auto;
+  @apply pulse:mx-auto;
 }
 .Layout-main .Layout-main-centered-md > .container-md,
 .Layout-main .Layout-main-centered-md > .container-lg,
@@ -226,14 +227,14 @@
 .Layout-main .Layout-main-centered-xl > .container-md,
 .Layout-main .Layout-main-centered-xl > .container-lg,
 .Layout-main .Layout-main-centered-xl > .container-xl {
-  @apply pulse-ml-0;
+  @apply pulse:ml-0;
 }
 .Layout-main .Layout-main-centered-md {
-  @apply pulse-max-w-[calc(var(--breakpoint-medium)_+_var(--Layout-sidebar-width)_+_var(--Layout-gutter))];
+  @apply pulse:max-w-[calc(var(--breakpoint-medium)_+_var(--Layout-sidebar-width)_+_var(--Layout-gutter))];
 }
 .Layout-main .Layout-main-centered-lg {
-  @apply pulse-max-w-[calc(var(--breakpoint-large)_+_var(--Layout-sidebar-width)_+_var(--Layout-gutter))];
+  @apply pulse:max-w-[calc(var(--breakpoint-large)_+_var(--Layout-sidebar-width)_+_var(--Layout-gutter))];
 }
 .Layout-main .Layout-main-centered-xl {
-  @apply pulse-max-w-[calc(var(--breakpoint-xlarge)_+_var(--Layout-sidebar-width)_+_var(--Layout-gutter))];
+  @apply pulse:max-w-[calc(var(--breakpoint-xlarge)_+_var(--Layout-sidebar-width)_+_var(--Layout-gutter))];
 }

data/app/components/pulse/layout.rb

@@ -3,6 +3,10 @@
 module Pulse
   # Renders a two-column page layout
   class Layout < Pulse::Component
+    # Main and sidebar placement work. Main `width:` options other than `:full`
+    # emit Primer classes that no CSS defines, so the content is not centred.
+    status :beta
+
     FIRST_IN_SOURCE_DEFAULT = :sidebar
     FIRST_IN_SOURCE_OPTIONS = [FIRST_IN_SOURCE_DEFAULT, :main].freeze
 
@@ -61,10 +65,10 @@ module Pulse
       @system_arguments = system_arguments
       @system_arguments[:tag] = :div
       @system_arguments[:classes] = merge_classes(
-        'pulse-grid pulse-grid-flow-col',
-        'pulse-grid-cols-[auto_0_minmax(0,calc(100%_-_var(--pulse-layout' \
+        'pulse:grid pulse:grid-flow-col',
+        'pulse:grid-cols-[auto_0_minmax(0,calc(100%_-_var(--pulse-layout' \
         '-sidebar-width)_-_var(--pulse-layout-gutter)))]',
-        'pulse-gap-[var(--pulse-layout-gutter)]',
+        'pulse:gap-(--pulse-layout-gutter)',
         GUTTER_MAPPINGS[fetch_or_fallback(GUTTER_OPTIONS, gutter,
                                           GUTTER_DEFAULT)],
         system_arguments[:classes]
@@ -77,6 +81,8 @@ module Pulse
 
     # The layout's main content.
     class Main < Pulse::Component
+      status :stable
+
       WIDTH_DEFAULT = :full
       WIDTH_OPTIONS = [WIDTH_DEFAULT, :md, :lg, :xl].freeze
 
@@ -92,7 +98,7 @@ module Pulse
         @system_arguments[:tag] =
           fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
         @system_arguments[:classes] = merge_classes(
-          'pulse-col-[2_/_span_2]',
+          'pulse:col-[2/span_2]',
           system_arguments[:classes]
         )
       end
@@ -105,7 +111,7 @@ module Pulse
             render(
               Pulse::BaseComponent.new(
                 tag: :div,
-                classes: "pulse-mx-auto Layout-main-centered-#{@width}"
+                classes: "pulse:mx-auto Layout-main-centered-#{@width}"
               )
             ) do
               render(Pulse::BaseComponent.new(tag: :div, container: @width)) do
@@ -119,6 +125,8 @@ module Pulse
 
     # The layout's sidebar content.
     class Sidebar < Pulse::Component
+      status :stable
+
       TAG_DEFAULT = :div
       TAG_OPTIONS = [TAG_DEFAULT, :aside, :nav, :section].freeze
 
@@ -128,7 +136,7 @@ module Pulse
         @system_arguments[:tag] =
           fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
         @system_arguments[:classes] = merge_classes(
-          'pulse-col-[1]',
+          'pulse:col-1',
           @system_arguments[:classes]
         )
       end

data/app/components/pulse/link.rb

@@ -5,13 +5,15 @@ module Pulse
   # `Link` styles anchor tags with default styling and hover
   # text-decoration.
   class Link < Pulse::Component
+    status :stable
+
     DEFAULT_SCHEME = :tertiary
     SCHEME_MAPPINGS = {
-      primary: 'pulse-text-primary hover:pulse-text-primary',
-      secondary: 'pulse-text-secondary hover:pulse-text-secondary',
-      tertiary: 'pulse-text-tertiary hover:pulse-text-tertiary',
-      reversed: 'pulse-text-gray-300 hover:pulse-text-gray-300 ' \
-                'focus:pulse-text-gray-300'
+      primary: 'pulse:text-primary pulse:hover:text-primary',
+      secondary: 'pulse:text-secondary pulse:hover:text-secondary',
+      tertiary: 'pulse:text-tertiary pulse:hover:text-tertiary',
+      reversed: 'pulse:text-neutral-300 pulse:hover:text-neutral-300 ' \
+                'pulse:focus:text-neutral-300'
     }.freeze
     SCHEME_OPTIONS = SCHEME_MAPPINGS.keys.freeze
 
@@ -31,8 +33,8 @@ module Pulse
         SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme,
                                           DEFAULT_SCHEME)],
         @options[:classes],
-        'pulse-font-bold': bold,
-        'pulse-underline hover:pulse-no-underline': condition && underline
+        'pulse:font-bold': bold,
+        'pulse:underline pulse:hover:no-underline': condition && underline
       )
     end
 
@@ -45,7 +47,7 @@ module Pulse
 
       @options[:classes] = class_names(
         @options[:classes],
-        'pulse-flex pulse-items-center pulse-gap-1.5'
+        'pulse:flex pulse:items-center pulse:gap-1.5'
       )
     end
   end

data/app/components/pulse/modal.html.slim

@@ -1,40 +1,40 @@
 = turbo_frame_tag 'pulse_modal' do
   = render Pulse::BaseComponent.new(**@system_arguments) do
     - unless auto_close
-      div class="pulse-flex pulse-items-center pulse-justify-center pulse-min-h-screen pulse-p-6 pulse-box-border"
+      div class="pulse:flex pulse:items-center pulse:justify-center pulse:min-h-screen pulse:p-6 pulse:box-border"
         /! bg overlay
         div{
           data-pulse--modal-target="wrapper" data-action="#{close_on_overlay_click ? 'click->pulse--modal#close' : ''}" aria-hidden="true"
-          data-transition-enter="pulse-ease-out pulse-duration-300"
-          data-transition-enter-start="pulse-opacity-0"
-          data-transition-enter-end="pulse-opacity-100"
-          data-transition-leave="pulse-ease-in pulse-duration-200"
-          data-transition-leave-start="pulse-opacity-100"
-          data-transition-leave-end="pulse-opacity-0"
-          class="pulse-fixed pulse-inset-0 pulse-bg-neutral-700/75 pulse-transition-opacity" }
+          data-transition-enter="pulse:ease-out pulse:duration-300"
+          data-transition-enter-start="pulse:opacity-0"
+          data-transition-enter-end="pulse:opacity-100"
+          data-transition-leave="pulse:ease-in pulse:duration-200"
+          data-transition-leave-start="pulse:opacity-100"
+          data-transition-leave-end="pulse:opacity-0"
+          class="pulse:fixed pulse:inset-0 pulse:bg-neutral-700/75 pulse:transition-opacity" }
 
         /! modal
         div{
           data-pulse--modal-target="body"
-          data-transition-enter="pulse-ease-out pulse-duration-300"
-          data-transition-enter-start="pulse-opacity-0 pulse-translate-y-4 sm:pulse-translate-y-0 sm:pulse-scale-95"
-          data-transition-enter-end="pulse-opacity-100 pulse-translate-y-0 sm:pulse-scale-100"
-          data-transition-leave="pulse-ease-in pulse-duration-200"
-          data-transition-leave-start="pulse-opacity-100 pulse-translate-y-0 sm:pulse-scale-100"
-          data-transition-leave-end="pulse-opacity-0 pulse-translate-y-4 sm:pulse-translate-y-0 sm:pulse-scale-95"
-          class="pulse-relative pulse-z-50 pulse-bg-white pulse-shadow-xl pulse-rounded-lg pulse-transition-all #{modal_classes}"
+          data-transition-enter="pulse:ease-out pulse:duration-300"
+          data-transition-enter-start="pulse:opacity-0 pulse:translate-y-4 pulse:sm:translate-y-0 pulse:sm:scale-95"
+          data-transition-enter-end="pulse:opacity-100 pulse:translate-y-0 pulse:sm:scale-100"
+          data-transition-leave="pulse:ease-in pulse:duration-200"
+          data-transition-leave-start="pulse:opacity-100 pulse:translate-y-0 pulse:sm:scale-100"
+          data-transition-leave-end="pulse:opacity-0 pulse:translate-y-4 pulse:sm:translate-y-0 pulse:sm:scale-95"
+          class="pulse:relative pulse:z-50 pulse:bg-white pulse:shadow-xl pulse:rounded-lg pulse:transition-all #{modal_classes}"
           role="dialog"
           aria-modal="true"}
 
           /! header
-          div class="pulse-flex pulse-items-center pulse-justify-between pulse-gap-4 pulse-p-4 md:pulse-p-5 pulse-border-b"
+          div class="pulse:flex pulse:items-center pulse:justify-between pulse:gap-4 pulse:p-4 pulse:md:p-5 pulse:border-b"
             - if title?
-              = render Pulse::Text.new(type: :h4, el_tag: :h2, classes: 'pulse-tracking-tight pulse-text-gray pulse-truncate')
+              = render Pulse::Text.new(type: :h4, el_tag: :h2, classes: 'pulse:tracking-tight pulse:text-neutral-700 pulse:truncate')
                 = title
 
             - if close_button
               button{
-                class="pulse-ms-auto pulse-inline-flex pulse-items-center pulse-justify-center pulse-w-10 pulse-h-7 pulse-bg-transparent pulse-border-none pulse-text-gray"
+                class="pulse:ms-auto pulse:inline-flex pulse:items-center pulse:justify-center pulse:w-10 pulse:h-7 pulse:bg-transparent pulse:border-none pulse:text-neutral-700"
                 data-action="pulse--modal#close"
                 aria-label="Close Modal"}
 
@@ -42,10 +42,10 @@
 
 
           /! body
-          div class="pulse-p-4 md:pulse-p-5 #{'pulse-mb-4' unless footer}"
+          div class="pulse:p-4 pulse:md:p-5 #{'pulse:mb-4' unless footer}"
             = content
 
           /! footer
           - if footer
-            div class="pulse-flex pulse-items-center pulse-p-4 md:pulse-p-5 pulse-border-t pulse-border-gray-300"
+            div class="pulse:flex pulse:items-center pulse:p-4 pulse:md:p-5 pulse:border-t pulse:border-neutral-300"
               = footer

data/app/components/pulse/modal.rb

@@ -3,6 +3,8 @@
 module Pulse
   # Renders a modal component targetable by turbo frame
   class Modal < Pulse::Component
+    status :stable
+
     include Turbo::FramesHelper
 
     renders_one :title
@@ -10,11 +12,11 @@ module Pulse
 
     DEFAULT_SIZE = :md
     SIZE_MAPPINGS = {
-      sm: 'pulse-max-w-md',
-      md: 'pulse-max-w-2xl',
-      lg: 'pulse-max-w-4xl',
-      xl: 'pulse-max-w-5xl',
-      xxl: 'pulse-max-w-6xl'
+      sm: 'pulse:max-w-md',
+      md: 'pulse:max-w-2xl',
+      lg: 'pulse:max-w-4xl',
+      xl: 'pulse:max-w-5xl',
+      xxl: 'pulse:max-w-6xl'
     }.freeze
     SIZE_OPTIONS = SIZE_MAPPINGS.keys.freeze
 
@@ -24,7 +26,7 @@ module Pulse
       @size = fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)
       @system_arguments = system_arguments
       @modal_classes = merge_classes(
-        'pulse-w-full',
+        'pulse:w-full',
         SIZE_MAPPINGS[@size],
         @system_arguments.delete(:classes)
       )
@@ -36,8 +38,8 @@ module Pulse
 
       @system_arguments[:'aria-labelledby'] = 'modal-title'
       @system_arguments[:'aria-modal'] = true
-      @system_arguments[:classes] = 'pulse-fixed pulse-z-9999 pulse-inset-0 ' \
-                                    'pulse-overflow-y-auto'
+      @system_arguments[:classes] = 'pulse:fixed pulse:z-9999 pulse:inset-0 ' \
+                                    'pulse:overflow-y-auto'
       @system_arguments[:data] = data_attributes
       @system_arguments[:role] = 'dialog'
       @system_arguments[:tabindex] = 0

data/app/components/pulse/modal_controller.js

@@ -43,7 +43,7 @@ export default class extends Controller {
     this.lastFocusedElement = document.activeElement
     enter(this.wrapperTarget)
     enter(this.bodyTarget)
-    document.body.classList.add("pulse-overflow-hidden")
+    document.body.classList.add("pulse:overflow-hidden")
   }
 
   close(e) {
@@ -54,7 +54,7 @@ export default class extends Controller {
       this.element.remove()
     })
 
-    document.body.classList.remove("pulse-overflow-hidden")
+    document.body.classList.remove("pulse:overflow-hidden")
 
     // Return focus to the last focused element
     if (this.lastFocusedElement) this.lastFocusedElement.focus()
@@ -66,7 +66,7 @@ export default class extends Controller {
 
   autoClose(e) {
     this.element.remove()
-    document.body.classList.remove("pulse-overflow-hidden")
+    document.body.classList.remove("pulse:overflow-hidden")
   }
 
   handleSubmit = e => {

data/app/components/pulse/nav_link.html.slim

@@ -2,15 +2,15 @@
 = render Pulse::BaseComponent.new(**@system_arguments) do
   - if @variant == :desktop
     = active_link_to @path, active: @active_mode,
-                            class_active: 'pulse-text-white hover:pulse-text-white hover:pulse-no-underline pulse-px-3 pulse-py-2 pulse-font-medium pulse-relative pulse-group pulse-is-active',
-                            class_inactive: 'pulse-text-white hover:pulse-text-white hover:pulse-no-underline pulse-px-3 pulse-py-2 pulse-font-medium pulse-relative pulse-group' do
+                            class_active: 'pulse:text-white pulse:hover:text-white pulse:hover:no-underline pulse:px-3 pulse:py-2 pulse:font-medium pulse:relative pulse:group pulse-is-active',
+                            class_inactive: 'pulse:text-white pulse:hover:text-white pulse:hover:no-underline pulse:px-3 pulse:py-2 pulse:font-medium pulse:relative pulse:group' do
       = @label
-      span class="pulse-absolute -pulse-bottom-0.5 pulse-left-1/2 pulse-w-0 pulse-h-0.5 pulse-bg-gray-300 group-hover:pulse-w-1/2 group-hover:pulse-transition-all pulse-duration-200"
-      span class="pulse-absolute -pulse-bottom-0.5 pulse-right-1/2 pulse-w-0 pulse-h-0.5 pulse-bg-gray-300 group-hover:pulse-w-1/2 group-hover:pulse-transition-all pulse-duration-200"
-      span class="pulse-absolute -pulse-bottom-0.5 pulse-start-0 pulse-w-full pulse-h-0.5 pulse-bg-primary pulse-hidden group-[.pulse-is-active]:pulse-block"
+      span class="pulse:absolute pulse:-bottom-0.5 pulse:left-1/2 pulse:w-0 pulse:h-0.5 pulse:bg-neutral-300 pulse:group-hover:w-1/2 pulse:group-hover:transition-all pulse:duration-200"
+      span class="pulse:absolute pulse:-bottom-0.5 pulse:right-1/2 pulse:w-0 pulse:h-0.5 pulse:bg-neutral-300 pulse:group-hover:w-1/2 pulse:group-hover:transition-all pulse:duration-200"
+      span class="pulse:absolute pulse:-bottom-0.5 pulse:inset-s-0 pulse:w-full pulse:h-0.5 pulse:bg-primary pulse:hidden pulse:group-[.pulse-is-active]:block"
   - else
     = active_link_to @path, active: @active_mode,
-                            class_active: 'pulse-text-primary-800 hover:pulse-no-underline pulse-block pulse-px-3 pulse-py-2',
-                            class_inactive: 'pulse-text-gray hover:pulse-no-underline pulse-block pulse-px-3 pulse-py-2',
+                            class_active: 'pulse:text-primary-800 pulse:hover:no-underline pulse:block pulse:px-3 pulse:py-2',
+                            class_inactive: 'pulse:text-neutral-700 pulse:hover:no-underline pulse:block pulse:px-3 pulse:py-2',
                             data: { action: 'dropdown#toggle' } do
       = @label

data/app/components/pulse/nav_link.rb

@@ -3,10 +3,12 @@
 module Pulse
   # Links in navbars
   class NavLink < Pulse::Component
+    status :stable
+
     DEFAULT_VARIANT = :desktop
     VARIANT_MAPPINGS = {
-      desktop: 'pulse-px-3 pulse-py-2',
-      mobile: 'pulse-px-3 pulse-py-2'
+      desktop: 'pulse:px-3 pulse:py-2',
+      mobile: 'pulse:px-3 pulse:py-2'
     }.freeze
     VARIANT_OPTIONS = VARIANT_MAPPINGS.keys.freeze
 

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

@@ -6,6 +6,8 @@ module Pulse
     #
     # See <%= link_to_component(NavList) %> for usage examples.
     class Heading < Pulse::Component
+      status :alpha
+
       attr_reader :title, :id, :heading_level, :system_arguments
 
       # @param title [String] The text content of the heading.
@@ -26,7 +28,7 @@ module Pulse
             type: :body4,
             tag: :"h#{heading_level}",
             id:,
-            classes: 'pulse-ml-2 pulse-mb-4',
+            classes: 'pulse:ml-2 pulse:mb-4',
             **system_arguments
           ).with_content(title)
         )

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

@@ -0,0 +1,8 @@
+/! components/pulse/nav_list/item
+- with_private_content do
+  - if items.present?
+    = render(Pulse::BaseComponent.new(tag: :ul, **@sub_list_arguments)) do
+      - items.each do |item|
+        = item
+
+= render_parent

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

@@ -81,7 +81,7 @@ module Pulse
         else
           @system_arguments[:classes] = merge_classes(
             @system_arguments[:classes],
-            'pulse-outline-none pulse-bg-gray-50' => active?
+            'pulse:outline-hidden pulse:bg-neutral-50' => active?
           )
         end
 
@@ -118,7 +118,7 @@ module Pulse
         "
 
         with_private_trailing_action_icon(
-          :'chevron-down',
+          icon: :'chevron-down',
           classes: 'ActionListItem-collapseIcon'
         )
 

data/app/components/pulse/nav_list.rb

@@ -14,6 +14,11 @@ module Pulse
   # or more ID values that determine which item will appear selected. Use the
   # `selected_item_id` argument to select the appropriate item.
   class NavList < Pulse::Component
+    # Incomplete: built on `ActionList`. Avatar items raise, sub-items render
+    # expanded and cannot be toggled, and the show-more item has no JavaScript.
+    # Top-level items, headings, groups and selection work.
+    status :alpha
+
     # @private
     def self.custom_element_name
       'nav-list'

data/app/components/pulse/popover.html.slim

@@ -1,5 +1,5 @@
 /! components/pulse/popover
-= render Pulse::BaseComponent.new(**@system_arguments) do
+= render Pulse::BaseComponent.new(**wrapper_arguments) do
   = render(body_component) do
     = heading
     = body