anchor_view_components 0.43.0 → 0.45.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ed9aaede95489205c325ca4ab6820458d84a5131d47aac172a0212f52fd4e228
-  data.tar.gz: c1eee26d158f6e4276dbbce9813e89a43f06151980a76823a1f91ac6863956a0
+  metadata.gz: 02e14b9cbe3088a320100d337b3f23f92c97e03f659bd16d42ac21655838cc07
+  data.tar.gz: 4323338bfdedf4ed58101ee366bd21726bc1f3d910d7c824a3bc8eae5ff93d59
 SHA512:
-  metadata.gz: 18d8e1894f3e249b37e803df49fb741d550229242f80ed91279eeb3d06efa242146737a25d55320b2f15569ac3dae4f187e99bada58feb4b879523fd6be2435c
-  data.tar.gz: 736ecc7b962bbafcf45e7f45af8a04f279f552eec2f2712aa115b23246a13ae0bc8dc44af958ea231bc470aad5f69e0001ddd7f45676278cb439c30e8ecc8569
+  metadata.gz: 2c89ce43a18e3072e0a24d30ac43a4f489cfeea27c318dff78d4f02769c8c2418f1d179b2a71158eb44bc680cf1bd4b2f7d7cde0fe93948b2e2a55c523b7b645
+  data.tar.gz: 35f880936914bd255eec0d3cc77f95352aef81b0dbe60feaada58877100e3c2b45468cd61fe6c0b471bf9836f0055aaff74fa16803cfccf7bfd917fab36542b3

data/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.45.0
+
+### Minor Changes
+
+- 2cf21ed: Add more-horiz icon
+- 2d2c3e6: Added a AssistiveTechNotifications component for notifying assistive tech users of changes that might otherwise only be presented visually. The output is two [ARIA live regions][aria-live-regions]—one `polite`, the other `assertive`—and is meant to be placed in an application’s layout so that it’s rendered on every page. Also provided, is the component’s public JavaScript function, `notifyAssistiveTech`, so that applications can easily send messages to these two live regions.
+
+  [aria-live-regions]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
+
+## 0.44.0
+
+### Minor Changes
+
+- a9e927c: Removed the deprecated `tag` parameter from the Button component.
+- 3f6ff7b: When a dialog is closed, any inner form error messages will be removed.
+- e2941f0: Added a `supporting_text` slot to the `Page::Footer` component, which renders
+  text next to the buttons.
+
 ## 0.43.0
 
 ### Minor Changes

data/app/assets/images/icons/percentage.svg

@@ -0,0 +1,6 @@
+<!-- Source: Iconoir, added via `bin/add_icon` -->
+<svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 19C15.8954 19 15 18.1046 15 17C15 15.8954 15.8954 15 17 15C18.1046 15 19 15.8954 19 17C19 18.1046 18.1046 19 17 19Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 9C5.89543 9 5 8.10457 5 7C5 5.89543 5.89543 5 7 5C8.10457 5 9 5.89543 9 7C9 8.10457 8.10457 9 7 9Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19 5L5 19" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

data/app/components/anchor/anchor_view_components.ts

@@ -10,6 +10,7 @@ import ToastController from "./toast_controller";
 import ToggleController from "./toggle_controller";
 import TypeaheadSelectController from "./typeahead_select_controller";
 import { Application } from "@hotwired/stimulus";
+import { notifyAssistiveTech } from "./assistive_tech_notifications_component";
 
 export function registerAnchorControllers(application: Application) {
   application.register("autocomplete", AutocompleteController);
@@ -31,4 +32,5 @@ export {
   ToastController,
   ToggleController,
   TypeaheadSelectController,
+  notifyAssistiveTech,
 };

data/app/components/anchor/assistive_tech_notifications_component.html.erb

@@ -0,0 +1,23 @@
+<%= tag.div(
+  **merge_options(
+    wrapper_options,
+    aria: {
+      atomic: true,
+      live: "polite",
+    },
+    class: "sr-only",
+    id: "js-assistive-tech-notifications",
+  ),
+) %>
+
+<%= tag.div(
+  **merge_options(
+    wrapper_options,
+    aria: {
+      atomic: true,
+      live: "assertive",
+    },
+    class: "sr-only",
+    id: "js-assistive-tech-notifications-assertive",
+  ),
+) %>

data/app/components/anchor/assistive_tech_notifications_component.rb

@@ -0,0 +1,4 @@
+module Anchor
+  class AssistiveTechNotificationsComponent < Component
+  end
+end

data/app/components/anchor/assistive_tech_notifications_component.ts

@@ -0,0 +1,15 @@
+export function notifyAssistiveTech(message: string, assertive = false) {
+  const liveRegionId = assertive
+    ? "js-assistive-tech-notifications-assertive"
+    : "js-assistive-tech-notifications";
+  const liveRegion = document.getElementById(liveRegionId);
+
+  if (liveRegion) {
+    liveRegion.textContent = message;
+  } else {
+    console.warn(
+      `Could not find #${liveRegionId}.`,
+      "Make sure to include `anchor_assistive_tech_notifications` in your Rails layout.",
+    );
+  }
+}

data/app/components/anchor/autocomplete/results_component.html.erb

@@ -1,9 +1,8 @@
 <% results.each do |result| %>
   <%= tag.li(
-    **merge_options(
-      { data: result.data },
+    **merge_options(wrapper_options,
       class: "list-group-item",
-      data: { autocomplete_value: result.value },
+      data: result.data.merge(autocomplete_value: result.value),
       role: "option",
     )
   ) do %>

data/app/components/anchor/autocomplete/results_component.rb

@@ -3,10 +3,10 @@ module Anchor
     class ResultsComponent < Component
       Result = Data.define(:text, :value, :data)
 
-      def initialize(data:)
+      def initialize(data:, **kwargs)
         @data = data
 
-        super
+        super(**kwargs)
       end
 
       private

data/app/components/anchor/autocomplete_component.html.erb

@@ -1,25 +1,25 @@
-<%= tag.div(
+<%= tag.div(**merge_options(wrapper_options,
   data: { controller: "autocomplete", autocomplete_url_value: src },
   role: "combobox",
   class: "group relative"
-) do %>
+)) do %>
   <% if form_builder.class.module_parent_name == "Anchor" %>
     <%= form_builder.text_field(
       name,
       **merge_options(input_options, default_input_options)
     ) %>
     <%= form_builder.text_field(
-      "#{name}_id".to_sym,
+      :"#{name}_id",
       { class: "hidden", data: { autocomplete_target: "hidden" }}
     ) %>
   <% else %>
     <%= form_builder.input(
-      "#{name}_search".to_sym,
+      :"#{name}_search",
       input_html: merge_options(input_options, default_input_options)
     ) %>
     <div class="hidden">
       <%= form_builder.input(
-        "#{name}_id".to_sym,
+        :"#{name}_id",
         input_html: { data: { autocomplete_target: "hidden" } }
       ) %>
     </div>

data/app/components/anchor/banner_component.rb

@@ -34,13 +34,11 @@ module Anchor
       warning: "text-warning",
     }.freeze
 
-    def initialize(**kwargs)
-      @icon = ICON_MAPPINGS[kwargs[:variant]] ||
-        ICON_MAPPINGS[VARIANT_DEFAULT]
-      @icon_variant = ICON_VARIANT_MAPPINGS[kwargs[:variant]] ||
-        ICON_VARIANT_MAPPINGS[VARIANT_DEFAULT]
+    def initialize(variant: VARIANT_DEFAULT, **kwargs)
+      @icon = ICON_MAPPINGS[variant]
+      @icon_variant = ICON_VARIANT_MAPPINGS[variant]
 
-      super
+      super(variant:, **kwargs)
     end
 
     private

data/app/components/anchor/button_component.rb

@@ -35,7 +35,6 @@ module Anchor
     end
 
     def initialize(
-      tag: nil,
       type: TYPE_DEFAULT,
       size: SIZE_DEFAULT,
       href: nil,
@@ -43,12 +42,6 @@ module Anchor
       full_width: false,
       **kwargs
     )
-      if tag
-        ActiveSupport::Deprecation.warn(
-          "`tag` is now set automatically and should no longer be used."
-        )
-      end
-
       @type = fetch_or_fallback(TYPE_OPTIONS, type, TYPE_DEFAULT)
       @size = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size,
         SIZE_DEFAULT)]

data/app/components/anchor/component.rb

@@ -16,7 +16,7 @@ module Anchor
         .merge(class: classes)
         .reject { |_, v| deep_blank?(v) }
 
-      super
+      super # rubocop:disable Anchor/AvoidImplicitSuper
     end
 
     private

data/app/components/anchor/copy_to_clipboard_component.en.yml

@@ -1,2 +1,3 @@
 en:
+  assistive_tech_notification: Copied
   copy_to_clipboard: Copy to Clipboard

data/app/components/anchor/copy_to_clipboard_component.html.erb

@@ -4,7 +4,7 @@
     action: "click->copy-to-clipboard#copy",
     controller: "copy-to-clipboard",
     copy_to_clipboard_text_to_copy_value: value,
-    copy_to_clipboard_hidden_class: "hidden",
+    copy_to_clipboard_assistive_tech_notification_value: t(".assistive_tech_notification"),
   },
   class: "bg-transparent",
   type: "button",
@@ -15,7 +15,7 @@
   ) %>
   <%= anchor_icon(
     icon: "check",
-    classes: "hidden",
+    hidden: true,
     data: { copy_to_clipboard_target: "successIcon"},
   ) %>
 <% end %>

data/app/components/anchor/copy_to_clipboard_controller.ts

@@ -1,26 +1,28 @@
 import { Controller } from "@hotwired/stimulus";
+import { notifyAssistiveTech } from "./assistive_tech_notifications_component";
 
 export default class extends Controller<HTMLDivElement> {
   static targets = [ "initialIcon", "successIcon"];
-  static classes = [ "hidden" ]
+  static values = {
+    assistiveTechNotification: String,
+    notificationDelay: { type: Number, default: 1500 },
+    textToCopy: String,
+  };
 
   declare readonly initialIconTarget: SVGElement;
   declare readonly successIconTarget: SVGElement;
   declare readonly notificationDelayValue: number;
   declare readonly hiddenClass: string;
   declare readonly textToCopyValue: string;
+  declare readonly assistiveTechNotificationValue: string;
   declare readonly hasTextToCopyValue: boolean;
 
-  static values = {
-    notificationDelay: { type: Number, default: 1500 },
-    textToCopy: String,
-  };
-
   copy(): void {
     if (this.hasTextToCopyValue) {
       navigator.clipboard.writeText(this.textToCopyValue);
     }
     this.toggleIcons();
+    notifyAssistiveTech(this.assistiveTechNotificationValue);
 
     setTimeout(() => {
       this.toggleIcons();
@@ -28,7 +30,7 @@ export default class extends Controller<HTMLDivElement> {
   }
 
   toggleIcons(): void {
-    this.initialIconTarget.classList.toggle(this.hiddenClass); 
-    this.successIconTarget.classList.toggle(this.hiddenClass); 
+    this.initialIconTarget.toggleAttribute("hidden");
+    this.successIconTarget.toggleAttribute("hidden");
   }
 }

data/app/components/anchor/dialog_component.html.erb

@@ -10,6 +10,7 @@
   ],
   data: {
     controller: "dialog",
+    action: "close->dialog#reset",
     testid: title_id,
   },
 })) do %>

data/app/components/anchor/dialog_controller.ts

@@ -8,4 +8,12 @@ export default class extends Controller<HTMLDialogElement> {
   close(): void {
     this.element.close();
   }
+
+  reset(): void {
+    this.#resetErrorMessages();
+  }
+
+  #resetErrorMessages(): void {
+    this.element.querySelectorAll("[data-error='true']").forEach((element) => element.remove());
+  }
 }

data/app/components/anchor/error_message_component.rb

@@ -13,8 +13,8 @@ module Anchor
       text-sm
     ).freeze
 
-    def initialize(form_builder:, attribute:, **kwargs)
-      @form_builder = form_builder
+    def initialize(object:, attribute:, **kwargs)
+      @object = object
       @attribute = attribute
 
       super(**kwargs)
@@ -22,16 +22,14 @@ module Anchor
 
     private
 
-    attr_reader :attribute, :form_builder
-
-    delegate :object, to: :form_builder
+    attr_reader :attribute
 
     def error_message
-      object.errors.full_messages_for(attribute).to_sentence
+      @object.errors.full_messages_for(attribute).to_sentence
     end
 
     def render?
-      object.errors.has_key?(attribute)
+      @object.errors.has_key?(attribute)
     end
   end
 end

data/app/components/anchor/input_component.rb

@@ -20,23 +20,19 @@ module Anchor
     ).freeze
 
     def initialize(
-      form_builder:,
       attribute:,
-      type:,
       starting_icon: nil,
       ending_icon: nil,
       **kwargs
     )
-      @form_builder = form_builder
       @attribute = attribute
-      @type = type
       @starting_icon = starting_icon
       @ending_icon = ending_icon
 
       super(**kwargs)
     end
 
-    attr_reader :attribute, :type, :starting_icon, :ending_icon
+    attr_reader :attribute, :starting_icon, :ending_icon
 
     def options
       {

data/app/components/anchor/label_component.rb

@@ -8,14 +8,10 @@ module Anchor
 
     attr_accessor :options
 
-    def initialize(form_builder:, attribute:, **options)
-      @form_builder = form_builder
-      @attribute = attribute
-      @options = options.merge(
-        class: Array(options.delete(:class)) + LABEL_CLASSES
-      )
+    def initialize(object:, attribute:, required: nil)
+      @options = { class: LABEL_CLASSES }
       @required = ModelValidators
-        .new(@form_builder.object, options)
+        .new(object, required:)
         .attribute_required?(attribute)
 
       super()

data/app/components/anchor/link_component.rb

@@ -10,7 +10,7 @@ module Anchor
     def initialize(href:, **kwargs)
       @href = href
 
-      super
+      super(**kwargs)
     end
 
     attr_reader :href

data/app/components/anchor/page/footer_component.html.erb

@@ -1,10 +1,11 @@
 <%= tag.footer(**merge_options(wrapper_options,
   class: class_names(
     Anchor::PageComponent::HORIZONTAL_PADDING_CLASS,
-    "py-5 flex justify-end gap-4 border-t bg-white border-subdued sticky bottom-0",
+    "py-5 flex items-center justify-end gap-4 border-t bg-white border-subdued sticky bottom-0",
   ),
   data: { testid: "page-footer" }),
 ) do %>
+  <%= supporting_text %>
   <%= delete_button unless done_button? %>
   <%= cancel_button unless done_button? %>
   <%= save_button unless done_button? %>

data/app/components/anchor/page/footer_component.rb

@@ -34,6 +34,14 @@ module Anchor
           **kwargs
         )
       }
+
+      renders_one :supporting_text, lambda { |supporting_text, **kwargs|
+        anchor_text(
+          supporting_text,
+          class: "text-secondary",
+          **kwargs
+        )
+      }
     end
   end
 end

data/app/components/anchor/radio_button_collection_component.rb

@@ -1,40 +1,7 @@
 module Anchor
   class RadioButtonCollectionComponent < Component
-    attr_reader :attribute, :descriptions, :form_builder
-
-    def initialize(
-      form_builder:,
-      attribute:,
-      collection:,
-      value_method:,
-      text_method:,
-      descriptions: nil,
-      **options
-    )
-      @form_builder = form_builder
-      @attribute = attribute
-      @collection = collection
-      @value_method = value_method
-      @text_method = text_method
-      @descriptions = descriptions
-      @options = options
-
-      super()
-    end
-
     def options
-      @options.merge(
-        class: Array(@options.delete(:class)) +
-          RadioButtonComponent::INPUT_CLASSES
-      )
-    end
-
-    def radio(radio:)
-      RadioButtonComponent.new(
-        radio:,
-        attribute:,
-        form_builder:
-      )
+      { class: RadioButtonComponent::INPUT_CLASSES }
     end
   end
 end

data/app/components/anchor/radio_button_component.html.erb

@@ -5,7 +5,7 @@
   <% if description.present? %>
     <div class="flex flex-col gap-1">
       <%= radio.label %>
-      <%= description_span %>
+      <%= tag.span description, id: description_id, class: DESCRIPTION_CLASSES %>
     </div>
   <% else %>
     <%= tag.div radio.label, class: "self-center" %>

data/app/components/anchor/radio_button_component.rb

@@ -36,24 +36,20 @@ module Anchor
       text-sm
     ).freeze
 
-    def initialize(radio:, attribute:, form_builder:, **kwargs)
+    def initialize(form_builder:, radio:, attribute:, **kwargs)
+      @form_builder = form_builder
       @radio = radio
       @attribute = attribute
-      @form_builder = form_builder
 
       super(**kwargs)
     end
 
     private
 
-    attr_reader :radio, :attribute, :form_builder
+    attr_reader :form_builder, :radio, :attribute
 
     delegate :value, :object, to: :radio
 
-    def description_span
-      tag.span description, id: description_id, class: DESCRIPTION_CLASSES
-    end
-
     def radio_options
       {
         aria: description.present? && aria_description,

data/app/components/anchor/select_component.rb

@@ -1,15 +1,11 @@
 module Anchor
   class SelectComponent < Component
-    attr_reader :attribute
-
     def initialize(
-      form_builder:,
       attribute:,
       choices:,
       show_marker: true,
       **kwargs
     )
-      @form_builder = form_builder
       @attribute = attribute
       @choices = choices
       @show_marker = show_marker
@@ -24,7 +20,7 @@ module Anchor
     def html_options
       {
         class: InputComponent::INPUT_CLASSES,
-        data: { testid: "select-#{attribute.to_s.dasherize}" },
+        data: { testid: "select-#{@attribute.to_s.dasherize}" },
       }
     end
 

data/app/components/anchor/toast_component.html.erb

@@ -1,7 +1,11 @@
 <%= tag.div(
   **merge_options(wrapper_options, {
     class: "toast",
-    data: { controller: "toast", testid: test_id },
+    data: {
+      controller: "toast",
+      toast_assistive_tech_notification_value: assistive_tech_notification,
+      testid: test_id,
+    },
     popover: "manual",
   })
 ) do %>

data/app/components/anchor/toast_component.rb

@@ -25,6 +25,10 @@ module Anchor
       content?
     end
 
+    def assistive_tech_notification
+      strip_tags(content)
+    end
+
     def test_id
       wrapper_options.dig(:data, :testid) || "toast"
     end

data/app/components/anchor/toast_controller.ts

@@ -1,11 +1,14 @@
 import { Controller } from "@hotwired/stimulus";
+import { notifyAssistiveTech } from "./assistive_tech_notifications_component";
 
 export default class extends Controller<HTMLDivElement> {
   static values = {
+    assistiveTechNotification: String,
     hideDelay: { type: Number, default: 3000 },
     showDelay: { type: Number, default: 200 },
   };
 
+  declare assistiveTechNotificationValue: string;
   declare hideDelayValue: number
   declare showDelayValue: number
 
@@ -17,6 +20,8 @@ export default class extends Controller<HTMLDivElement> {
     setTimeout(() => {
       this.element.remove();
     }, this.hideDelayValue);
+
+    notifyAssistiveTech(this.assistiveTechNotificationValue);
   }
 
   disconnect(): void {

data/app/helpers/anchor/form_builder.rb

@@ -32,15 +32,7 @@ module Anchor
       options = {},
       html_options = {}
     )
-      render RadioButtonCollectionComponent.new(
-        form_builder: self,
-        attribute:,
-        collection:,
-        value_method:,
-        text_method:,
-        **options,
-        **html_options
-      ) do |component|
+      render RadioButtonCollectionComponent.new do |component|
         super(
           attribute,
           collection,
@@ -49,7 +41,11 @@ module Anchor
           options,
           component.options.merge(html_options),
         ) do |radio|
-          render component.radio(radio:)
+          render RadioButtonComponent.new(
+            radio:,
+            attribute:,
+            form_builder: self
+          )
         end
       end
     end
@@ -86,9 +82,7 @@ module Anchor
 
     def email_field(attribute, options = {})
       render InputComponent.new(
-        form_builder: self,
         attribute:,
-        type: :email,
         starting_icon: options.delete(:starting_icon),
         ending_icon: options.delete(:ending_icon)
       ) do |component|
@@ -98,7 +92,7 @@ module Anchor
 
     def error_message_for(attribute, options = {})
       render ErrorMessageComponent.new(
-        form_builder: self,
+        object:,
         attribute:,
         **options
       )
@@ -106,10 +100,9 @@ module Anchor
 
     def label(attribute, text = nil, options = {}, &block)
       render LabelComponent.new(
-        form_builder: self,
+        object:,
         attribute:,
-        text:,
-        **options
+        required: options.delete(:required) { :if_has_validators }
       ) do |component|
         if block.present?
           super
@@ -126,31 +119,26 @@ module Anchor
 
     def number_field(attribute, options = {})
       render InputComponent.new(
-        form_builder: self,
         attribute:,
-        type: :number,
         starting_icon: options.delete(:starting_icon),
         ending_icon: options.delete(:ending_icon)
       ) do |component|
-        super attribute, component.options.merge(options)
+        super(attribute, component.options.merge(options))
       end
     end
 
     def search_field(attribute, options = {})
       render InputComponent.new(
-        form_builder: self,
         attribute:,
-        type: :search,
         starting_icon: options.delete(:starting_icon),
         ending_icon: options.delete(:ending_icon)
       ) do |component|
-        super attribute, component.options.merge(options)
+        super(attribute, component.options.merge(options))
       end
     end
 
     def select(attribute, choices = nil, options = {}, html_options = {}, &)
       render SelectComponent.new(
-        form_builder: self,
         attribute:,
         choices:,
         show_marker: options.fetch(:show_marker, true),
@@ -168,9 +156,7 @@ module Anchor
 
     def text_field(attribute, options = {})
       render InputComponent.new(
-        form_builder: self,
         attribute:,
-        type: :text,
         starting_icon: options.delete(:starting_icon),
         ending_icon: options.delete(:ending_icon)
       ) do |component|

data/app/helpers/anchor/model_validators.rb

@@ -1,13 +1,18 @@
 module Anchor
   class ModelValidators
-    def initialize(model, options)
+    # Pass the value :if_has_validators to the required keyword argument to
+    # indicate an unspecified value. Passing any other value will result in
+    # `required`'s truthiness being used to determine whether the attribute is
+    # required, while passing :if_has_validators will check the model's
+    # validators.
+    def initialize(model, required: :if_has_validators)
       @model = model
-      @options = options
+      @required = required
     end
 
     def attribute_required?(attribute)
-      if options.has_key?(:required)
-        options[:required]
+      if required != :if_has_validators
+        required
       elsif has_validators?
         attribute_required_by_validators?(attribute)
       else
@@ -17,7 +22,7 @@ module Anchor
 
     private
 
-    attr_reader :model, :options
+    attr_reader :model, :required
 
     def has_validators?
       model.class.respond_to?(:validators_on)

data/app/helpers/anchor/view_helper.rb

@@ -2,6 +2,7 @@ module Anchor
   module ViewHelper
     ANCHOR_HELPERS = %i[
       action_menu
+      assistive_tech_notifications
       autocomplete/results
       badge
       banner

data/lib/anchor/view_components/version.rb

@@ -1,5 +1,5 @@
 module Anchor
   module ViewComponents
-    VERSION = "0.43.0".freeze
+    VERSION = "0.45.0".freeze
   end
 end

data/lib/cops/anchor/avoid_implicit_super.rb

@@ -0,0 +1,23 @@
+module Anchor
+  class AvoidImplicitSuper < RuboCop::Cop::Cop
+    MSG = "Avoid implicit `super` calls. Prefer `super(**kwargs)`, " \
+          "`super()`, or a mix of explicit/implicit arguments, e.g. " \
+          "`super(id:, title:, **kwargs)`.".freeze
+
+    def_node_matcher :initialize_with_implicit_super?, <<~PATTERN
+      (def :initialize _ (begin ... $`zsuper ...))
+    PATTERN
+
+    def on_def(node)
+      return unless (zsuper = initialize_with_implicit_super?(node))
+
+      add_offense(zsuper, message:)
+    end
+
+    private
+
+    def message
+      MSG
+    end
+  end
+end

data/previews/anchor/assistive_tech_notifications_component_preview/default.html.erb

@@ -0,0 +1,10 @@
+<%= anchor_text do %>
+  This component is visually hidden, by design. Inspect the page source and look
+  for the two
+  <%= anchor_link(
+    "ARIA live regions",
+    href: "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions",
+  ) %>:
+  <code>div#js-assistive-tech-notifications</code>
+  and <code>div#js-assistive-tech-notifications-assertive</code>.
+<% end %>

data/previews/anchor/assistive_tech_notifications_component_preview.rb

@@ -0,0 +1,5 @@
+module Anchor
+  class AssistiveTechNotificationsComponentPreview < Preview
+    def default; end
+  end
+end

data/previews/anchor/dialog_component_preview/with_form.html.erb

@@ -0,0 +1,21 @@
+<% invalid_user = FakeUser.new(name: "").tap(&:validate) %>
+
+<%= anchor_dialog(
+  id: "my-dialog",
+  title: "Dialog Title",
+) do |dialog| %>
+  <% dialog.with_show_button_content("Open dialog") %>
+
+  <% dialog.with_body do %>
+    <%= anchor_form_with(model: invalid_user, url: false, id: 'a-form') do |form| %>
+      <%= form.label(:name) %>
+      <%= form.text_field(:name, required: true) %>
+      <%= form.error_message_for(:name) %>
+    <% end %>
+  <% end %>
+
+  <% dialog.with_footer do %>
+    <%= anchor_button("Cancel", data: { action: "dialog#close" }) %>
+    <%= anchor_button("Save", variant: :primary, type: :submit, form: 'a-form') %>
+  <% end %>
+<% end %>

data/previews/anchor/dialog_component_preview.rb

@@ -16,6 +16,8 @@ module Anchor
       end
     end
 
+    def with_form; end
+
     def with_footer; end
 
     def positioned_right; end

data/previews/anchor/page_component_preview/with_supporting_text_and_buttons.html.erb

@@ -0,0 +1,24 @@
+<%= anchor_page do |page| %>
+  <% page.with_header do |header| %>
+    <% header.with_breadcrumbs do |breadcrumbs| %>
+      <% breadcrumbs.with_item(href: "#").with_content("Breadcrumb 1") %>
+      <% breadcrumbs.with_item(href: "").with_content("Breadcrumb 2") %>
+    <% end %>
+    <% header.with_title("Page title") %>
+  <% end %>
+  <% page.with_body do |body| %>
+    <%= anchor_form_with(url: false, id: "form") do |form| %>
+      <%= tag.div class: "max-w-sm" do %>
+        <%= form.label :name, "Name" %>
+        <%= form.text_field(
+      :name,
+    ) %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <% page.with_footer do |footer| %>
+    <% footer.with_cancel_button(href: "#") %>
+    <% footer.with_save_button(form: "form") %>
+    <% footer.with_supporting_text("Optional text") %>
+  <% end %>
+<% end %>

data/previews/anchor/page_component_preview.rb

@@ -15,5 +15,7 @@ module Anchor
     def with_done_button; end
 
     def with_cancel_and_save_buttons; end
+
+    def with_supporting_text_and_buttons; end
   end
 end

data/previews/forms/with_icons.html.erb

@@ -1,20 +1,11 @@
-<%= anchor_form_with url: false, method: :get do |form| %>
-  <%= form.search_field :search, placeholder: "Search…",
-    starting_icon: :search %>
-  <%= form.text_field :search, placeholder: "Search…",
-    ending_icon: :calendar %>
-  <%= form.text_field :search, placeholder: "Search…", starting_icon: :search,
-    ending_icon: :calendar %>
-  <%= form.number_field(
-    :amount,
-    placeholder: "0.00",
-    starting_icon: :dollar,
-    step: 0.01
-  ) %>
-  <%= form.number_field(
-    :amount,
-    placeholder: "0",
-    ending_icon: :dollar,
-    step: 1
-  ) %>
+<%= anchor_form_with url: false do |form| %>
+  <%= tag.div do %>
+    <%= form.label :price %>
+    <%= form.text_field :price, inputmode: :numeric, starting_icon: "dollar" %>
+  <% end %>
+
+  <%= tag.div do %>
+    <%= form.label :discount %>
+    <%= form.text_field :discount, inputmode: :numeric, ending_icon: "percentage" %>
+  <% end %>
 <% end %>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: anchor_view_components
 version: !ruby/object:Gem::Version
-  version: 0.43.0
+  version: 0.45.0
 platform: ruby
 authors:
 - Buoy Software
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-01-04 00:00:00.000000000 Z
+date: 2024-01-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -69,6 +69,7 @@ files:
 - app/assets/images/icons/nav-arrow-left.svg
 - app/assets/images/icons/nav-arrow-right.svg
 - app/assets/images/icons/paste-clipboard.svg
+- app/assets/images/icons/percentage.svg
 - app/assets/images/icons/plus.svg
 - app/assets/images/icons/search.svg
 - app/assets/images/icons/warning-circle.svg
@@ -82,6 +83,9 @@ files:
 - app/components/anchor/action_menu_component.html.erb
 - app/components/anchor/action_menu_component.rb
 - app/components/anchor/anchor_view_components.ts
+- app/components/anchor/assistive_tech_notifications_component.html.erb
+- app/components/anchor/assistive_tech_notifications_component.rb
+- app/components/anchor/assistive_tech_notifications_component.ts
 - app/components/anchor/autocomplete/results_component.html.erb
 - app/components/anchor/autocomplete/results_component.rb
 - app/components/anchor/autocomplete_component.en.yml
@@ -191,10 +195,13 @@ files:
 - lib/anchor/view_components/svg_resolver.rb
 - lib/anchor/view_components/version.rb
 - lib/anchor_view_components.rb
+- lib/cops/anchor/avoid_implicit_super.rb
 - previews/anchor/action_menu_component_preview.rb
 - previews/anchor/action_menu_component_preview/autoplacement.html.erb
 - previews/anchor/action_menu_component_preview/custom_trigger.html.erb
 - previews/anchor/action_menu_component_preview/opens_a_dialog.html.erb
+- previews/anchor/assistive_tech_notifications_component_preview.rb
+- previews/anchor/assistive_tech_notifications_component_preview/default.html.erb
 - previews/anchor/badge_component_preview.rb
 - previews/anchor/banner_component_preview.rb
 - previews/anchor/banner_component_preview/body_only.html.erb
@@ -209,6 +216,7 @@ files:
 - previews/anchor/dialog_component_preview/positioned_right.html.erb
 - previews/anchor/dialog_component_preview/with_custom_show_button.html.erb
 - previews/anchor/dialog_component_preview/with_footer.html.erb
+- previews/anchor/dialog_component_preview/with_form.html.erb
 - previews/anchor/filter_component_preview.rb
 - previews/anchor/forms_preview.rb
 - previews/anchor/icon_component_preview.rb
@@ -223,6 +231,7 @@ files:
 - previews/anchor/page_component_preview/with_done_button.html.erb
 - previews/anchor/page_component_preview/with_page_header_custom_content.html.erb
 - previews/anchor/page_component_preview/with_search.html.erb
+- previews/anchor/page_component_preview/with_supporting_text_and_buttons.html.erb
 - previews/anchor/panel_component_preview.rb
 - previews/anchor/panel_component_preview/with_banner.html.erb
 - previews/anchor/preview.rb