ariadne_view_components 0.0.47-x86_64-linux → 0.0.49-x86_64-linux

data/app/components/ariadne/synced_boolean_attributes_controller/synced_boolean_attributes_controller.ts

@@ -0,0 +1,192 @@
+import OutletManagerController from '../outlet_manager_controller/outlet_manager_controller'
+
+export type TStimulusDispatchEvent<TDetails> = {
+  target?: Element | undefined
+  detail?: TDetails | undefined
+  prefix?: string | undefined
+  bubbles?: boolean | undefined
+  cancelable?: boolean | undefined
+  preventDefault: () => void
+}
+
+export type TBooleanValueDetail = {
+  value: boolean
+}
+
+export interface TSyncAttrDetail extends TBooleanValueDetail {
+  attr: string
+}
+
+/*
+ This class isn't used directly by itself because it has no functionality. What it does is establishes
+ "synced attrs" and "anti-attrs" so that other controllers can extend this one and not worry about
+ implementing the logic themselves (and thus have duplicate logic all over our controllers)
+
+ To implement this, extend your controller with "SyncedBooleanAttributesController" then spread its
+ values into your controllers then implement:
+
+ export default class MyNewController extends SyncedBooleanAttributesController {
+  static values = {
+    ...SyncedBooleanAttributesController.values,
+    myString: String,
+  }
+}
+
+Also, consider the functions defined here ABOVE the connection() function. Those functions will
+give you control over how your controller can interact with other SyncedBooleanAttributeControllers.
+Not every controller needs them but you should consider them (description can be found in the functions)
+
+And don't forget that when you want to change an attr on an element, you should not do it manually.
+Instead run:
+this.updateAttributesForElement(element, value)
+This will let you take advantage of the ecosystem created by this base controller without any additional work
+*/
+
+export default class SyncedBooleanAttributesController<T> extends OutletManagerController<T> {
+  static values = {
+    ...OutletManagerController.values,
+    syncedAttrs: Array, // Set option target attrs to true/false in agreement with the option's selected state
+    antiAttrs: Array, // Set option target attrs to true/false opposite of the option's selected state
+    protectAttrs: Boolean, // If the controller should block other SyncedBooleanAttributesController from changing its defined attrs
+  }
+
+  declare readonly syncedAttrsValue: string[]
+  declare readonly hasSyncedAttrsValue: boolean
+  declare readonly antiAttrsValue: string[]
+  declare readonly hasAntiAttrsValue: boolean
+  declare readonly protectAttrsValue: boolean
+
+  // Some attributes are only false in HTML if they don't exist
+  // If included here, the property will be deleted on "false"
+  static removeOnFalseAttrs: {[k: string]: boolean} = {
+    checked: true,
+  }
+
+  syncedAttrsLookup: {[k: string]: boolean} | null = null
+  antiAttrsLookup: {[k: string]: boolean} | null = null
+
+  getValueForElement(element: Element): boolean | null {
+    // This function allows the base controller to access a given element's
+    // current status so the attributes can be set or compared. For example,
+    // you will want to make sure the attributes are added initially and are
+    // in sync with the controller's state. To ensure this, you can use the
+    // default connect() function or add "this.syncElementAttributes()" to your
+    // custom connect function. It'll look through your targets and get values for
+    // each then set the appropriate attrs and anti-attrs
+    return null
+  }
+
+  getElementsToSync(): Array<Element> | null | undefined {
+    // These are the elements your controller wants to keep in sync with the attrs
+    // Sometimes these are this.element, sometimes they're specific targets.
+    // Return them here so the base controller can automate some behaviors for you
+    return []
+  }
+
+  connect(): void {
+    // This function will sync attrs and anti-attrs when the controller connects.
+    // The logic is abstracted to a function so you can override this connect
+    // function in favor of your own without having to duplicate the sync logic
+    this.syncElementAttributes()
+  }
+
+  updateAttributesForElement(element: Element, value: boolean) {
+    // This is how you should update any synced or anti-synced attrs on your elements
+    // Do not do it manually unless you are very sure of what you're doing
+    if (this.hasSyncedAttrsValue) {
+      this.#setAttrs(element, this.syncedAttrsValue, value)
+    }
+
+    if (this.hasAntiAttrsValue) {
+      this.#setAttrs(element, this.antiAttrsValue, !value)
+    }
+  }
+
+  syncElementAttributes() {
+    this.syncOutlets()
+    // Essentially just a "sync attrs and anti-attrs on mount" function
+    const elements = this.getElementsToSync()
+
+    if (elements?.length) {
+      for (let index in elements) {
+        const element = elements[index]
+        const value = this.getValueForElement(element) ?? false
+        this.updateAttributesForElement(element, value)
+      }
+    }
+  }
+
+  validateAttrChange(dispatchEvent: TStimulusDispatchEvent<TSyncAttrDetail>) {
+    // If you protect your attrs, then this function will deny other controllers you specify from making changes to them.
+    // For example, if you want an item to disappear when it's selected, then your Options controller likely has an "aria-hidden"
+    // synced attr. If you use another attr to filter the list and then remove that filter, normally that would unhide your selected
+    // element. But if you have Options protect its attrs, the filter behavior won't be allowed to change it at any time and thus
+    // the element will remain hidden
+    const {target, detail} = dispatchEvent
+    if (target && detail) {
+      const currentValue = this.getValueForElement(target)
+      if (currentValue !== null && this.protectAttrsValue && this.#isAttr(detail.attr)) {
+        dispatchEvent.preventDefault()
+      }
+    }
+  }
+
+  #isSyncedAttr(attr: string) {
+    // Helper function to determine if the attr is synced
+    if (this.syncedAttrsLookup === null) {
+      this.syncedAttrsLookup = this.#getLookupForStringArray(this.syncedAttrsValue)
+    }
+
+    return this.syncedAttrsLookup[attr] ?? false
+  }
+
+  #isAntiAttr(attr: string) {
+    // Helper function to determine if the attr is anti-synced
+    if (this.antiAttrsLookup === null) {
+      this.antiAttrsLookup = this.#getLookupForStringArray(this.antiAttrsValue)
+    }
+
+    return this.antiAttrsLookup[attr] ?? false
+  }
+
+  #isAttr(attr: string) {
+    // Helper function to determine if an attr is known to a controller
+    return this.#isAntiAttr(attr) || this.#isSyncedAttr(attr)
+  }
+
+  #setAttrs(element: Element, attrs: string[], value: boolean) {
+    // Attempts to change the attr for an element. However, it'll dispatch an event
+    // first so other controllers get the opportunity to deny it
+    const attrState = JSON.stringify(value)
+    for (let index in attrs) {
+      const attr = attrs[index]
+
+      const dispatchEvent = this.dispatch('attrChange', {
+        target: element,
+        detail: {attr, value},
+      } as TStimulusDispatchEvent<TSyncAttrDetail>)
+
+      if (!dispatchEvent.defaultPrevented) {
+        if (attrState === 'false' && SyncedBooleanAttributesController.removeOnFalseAttrs[attr]) {
+          element.removeAttribute(attr)
+        } else {
+          element.setAttribute(attr, attrState)
+        }
+      }
+    }
+  }
+
+  #getLookupForStringArray(arr?: Array<string>) {
+    // Helper function to return an array of strings into an object for easy lookup
+    // While the arrays contained here are small, looking up attrs will happen often
+    // so I think it's worth the small sacrifice to memory
+    if (!arr?.length) {
+      return {}
+    }
+
+    return arr.reduce((acc, cur) => {
+      acc[cur] = true
+      return acc
+    }, {} as {[k: string]: boolean})
+  }
+}

data/app/components/ariadne/toggle_component/toggle_component.html.erb

@@ -0,0 +1,15 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |wrapper| %>
+  <label class="ariadne-flex ariadne-w-fit ariadne-items-center <%= @label_classes %>">
+    <% if content? %>
+      <span class="group-data-[label-position=start]/wrapper:ariadne-mr-1.5 group-data-[label-position=end]/wrapper:ariadne-ml-1"><%= content %></span>
+    <% end %>
+    <%= render Ariadne::BaseComponent.new(tag: :button, classes: @button_classes, attributes: @button_attributes) do |button| %>
+      <span class="ariadne-sr-only ariadne-translate-x-3">Use setting</span>
+      <span aria-hidden="true" class="ariadne-pointer-events-none ariadne-absolute ariadne-h-full ariadne-w-full ariadne-rounded-md ariadne-bg-white"></span>
+      <span aria-hidden="true"
+      class="ariadne-bg-gray-200 ariadne-pointer-events-none ariadne-absolute ariadne-mx-auto ariadne-rounded-full ariadne-transition-colors ariadne-duration-200 ariadne-ease-in-out <%= @track_classes %>"></span>
+      <span aria-hidden="true"
+      class="ariadne-pointer-events-none ariadne-absolute ariadne-left-0 ariadne-inline-block ariadne-transform ariadne-rounded-full ariadne-border ariadne-border-gray-200 ariadne-bg-white ariadne-shadow ariadne-ring-0 ariadne-transition-transform ariadne-duration-200 ariadne-ease-in-out <%= @thumb_classes %>"></span>
+    <% end %>
+  </label>
+<% end %>

data/app/components/ariadne/toggle_component.rb

@@ -0,0 +1,95 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Simple toggle switch with on/off state. The logic is controlled by toggleable_controller and styles applied through
+  # tailwind's group+data attributes: https://tailwindcss.com/docs/hover-focus-and-other-states#data-attributes
+  class ToggleComponent < Ariadne::Component
+    DEFAULT_TAG = :div
+
+    DEFAULT_STATUS_LABEL_POSITION = :start
+    STATUS_LABEL_POSITION_MAPPINGS = {
+      start: "ariadne-flex-row",
+      end: "ariadne-flex-row-reverse",
+    }.freeze
+    STATUS_LABEL_POSITION_OPTIONS = STATUS_LABEL_POSITION_MAPPINGS.keys.freeze
+
+    DEFAULT_SIZE = :md
+    THUMB_SIZE_MAPPINGS = { sm: "ariadne-translate-x-0 ariadne-h-3 ariadne-w-3 group-aria-checked/toggle:ariadne-translate-x-3", md: "ariadne-translate-x-0 ariadne-h-5 ariadne-w-5 group-aria-checked/toggle:ariadne-translate-x-5" }.freeze
+    TRACK_SIZE_MAPPINGS = { sm: "ariadne-h-2 ariadne-w-4", md: "ariadne-h-4 ariadne-w-9" }.freeze
+    BUTTON_SIZE_MAPPINGS = { sm: "ariadne-h-3 ariadne-w-6", md: "ariadne-h-5 ariadne-w-10" }.freeze
+    LABEL_SIZE_MAPPINGS = { sm: "ariadne-text-xs", md: "ariadne-text-lg" }.freeze
+    SIZE_OPTIONS = THUMB_SIZE_MAPPINGS.keys.freeze
+
+    DEFAULT_CLASSES = {
+      wrapper: "ariadne-group/wrapper data-[disabled=true]:ariadne-opacity-50 data-[disabled=true]:ariadne-cursor-auto",
+      button: "ariadne-flex ariadne-justify-center ariadne-group/toggle ariadne-relative ariadne-inline-flex ariadne-flex-shrink-0 group-data-[disabled=false]/wrapper:ariadne-cursor-pointer ariadne-items-center ariadne-justify-center ariadne-rounded-full ariadne-focus:outline-none ariadne-focus:ring-2 ariadne-focus:ring-indigo-600 ariadne-focus:ring-offset-2 disabled:ariadne-cursor-auto",
+    }
+
+    DEFAULT_ATTRIBUTES = {
+      wrapper: {}.freeze,
+      button: {
+        role: "switch",
+        "data-controller": "toggleable",
+        "data-toggleable-synced-attrs-value": '["aria-checked"]',
+        "data-action": "click->toggleable#toggle",
+      },
+    }.freeze
+
+    DEFAULT_TRACK_COLOR = :indigo
+    TRACK_COLOR_MAPPINGS = {
+      white: "group-aria-checked/toggle:ariadne-bg-white",
+      green: "group-aria-checked/toggle:ariadne-bg-green-600",
+      blue: "group-aria-checked/toggle:ariadne-bg-blue-600",
+      billy_purple: "group-aria-checked/toggle:ariadne-bg-billy-purple",
+      indigo: "group-aria-checked/toggle:ariadne-bg-indigo-600",
+    }
+    TRACK_COLOR_OPTIONS = TRACK_COLOR_MAPPINGS.keys.freeze
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::ToggleComponent.new) { "Example" } %>
+    #
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param color [String] <%= link_to_classes_docs %>
+    # @param checked [Boolean] <%= link_to_classes_docs %>
+    # @param disabled [Boolean] <%= link_to_classes_docs %>
+    # @param size [String] <%= link_to_classes_docs %>
+    # @param label [String] <%= link_to_classes_docs %>
+    # @param status_label_position [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(
+      classes: nil,
+      checked: false,
+      disabled: false,
+      size: DEFAULT_SIZE,
+      color: DEFAULT_TRACK_COLOR,
+      status_label_position: DEFAULT_STATUS_LABEL_POSITION,
+      attributes: {}
+    )
+      @tag = DEFAULT_TAG
+      @size = fetch_or_raise(SIZE_OPTIONS, size)
+      @status_label_position = fetch_or_raise(STATUS_LABEL_POSITION_OPTIONS, status_label_position)
+      @color = fetch_or_raise(TRACK_COLOR_OPTIONS, color)
+      @classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
+      @checked = checked
+      @disabled = disabled
+      @attributes = DEFAULT_ATTRIBUTES[:wrapper].merge({ "data-label-position": @status_label_position, "data-disabled": @disabled }).merge(attributes)
+
+      @label_classes = merge_class_names(STATUS_LABEL_POSITION_MAPPINGS.fetch(@status_label_position), LABEL_SIZE_MAPPINGS.fetch(@size))
+
+      @button_classes = merge_class_names(DEFAULT_CLASSES[:button], BUTTON_SIZE_MAPPINGS.fetch(@size))
+      @button_attributes = DEFAULT_ATTRIBUTES[:button].merge({ "aria-checked": @checked, "data-toggleable-state-value": @checked, disabled: @disabled })
+
+      @thumb_classes = THUMB_SIZE_MAPPINGS.fetch(@size)
+      @track_classes = merge_class_names(TRACK_SIZE_MAPPINGS.fetch(@size), TRACK_COLOR_MAPPINGS.fetch(@color))
+    end
+
+    def on?
+      @checked
+    end
+
+    def disabled?
+      @disabled
+    end
+  end
+end

data/app/components/ariadne/toggleable_controller/toggleable_controller.d.ts

@@ -0,0 +1,34 @@
+import type { TOutletChangeData } from '../outlet_manager_controller/outlet_manager_controller';
+import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller';
+export interface ToggleableOutlet extends SyncedBooleanAttributesController<boolean> {
+    toggle: (event: Event, updateTo?: TOutletChangeData<boolean>) => void;
+}
+export default class ToggleableController extends SyncedBooleanAttributesController<boolean> implements ToggleableOutlet {
+    static outlets: string[];
+    static values: {
+        state: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        closeOnOutsideClick: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        syncedAttrs: ArrayConstructor;
+        antiAttrs: ArrayConstructor;
+        protectAttrs: BooleanConstructor;
+        outletEvents: ArrayConstructor;
+    };
+    stateValue: boolean;
+    readonly closeOnOutsideClickValue: boolean;
+    connect(): void;
+    toggle(event: Event, updateTo?: TOutletChangeData<boolean>): void;
+    on(event: Event): void;
+    off(event: Event): void;
+    clickOutside(event: Event): void;
+    getValueForElement(element: Element): boolean | null;
+    getElementsToSync(): Element[] | null | undefined;
+    getState(): boolean;
+    get event_key_postfix(): "on" | "off";
+    outletUpdate: (event: Event, updateTo?: TOutletChangeData<boolean>) => void;
+}

data/app/components/ariadne/toggleable_controller/toggleable_controller.js

@@ -0,0 +1,54 @@
+import { useClickOutside } from 'stimulus-use';
+import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller';
+class ToggleableController extends SyncedBooleanAttributesController {
+    constructor() {
+        super(...arguments);
+        this.outletUpdate = this.toggle;
+    }
+    connect() {
+        this.syncElementAttributes();
+        useClickOutside(this, { dispatchEvent: this.closeOnOutsideClickValue && this.stateValue });
+    }
+    toggle(event, updateTo = {}) {
+        var _a;
+        const v = (_a = updateTo.data) !== null && _a !== void 0 ? _a : !this.stateValue;
+        this.updateAttributesForElement(this.element, v);
+        this.stateValue = v;
+        this.sendToOutlets(event, Object.assign(Object.assign({}, updateTo), { data: v }));
+    }
+    on(event) {
+        this.toggle(event, { data: true });
+    }
+    off(event) {
+        this.toggle(event, { data: false });
+    }
+    clickOutside(event) {
+        if (this.closeOnOutsideClickValue && this.stateValue) {
+            this.toggle(event, { data: false });
+        }
+    }
+    getValueForElement(element) {
+        if (element !== this.element) {
+            return null;
+        }
+        return this.stateValue;
+    }
+    getElementsToSync() {
+        return [this.element];
+    }
+    getState() {
+        return this.stateValue;
+    }
+    get event_key_postfix() {
+        return this.stateValue ? 'on' : 'off';
+    }
+}
+ToggleableController.outlets = SyncedBooleanAttributesController.outlets;
+ToggleableController.values = Object.assign(Object.assign({}, SyncedBooleanAttributesController.values), { state: {
+        type: Boolean,
+        default: false,
+    }, closeOnOutsideClick: {
+        type: Boolean,
+        default: false,
+    } });
+export default ToggleableController;

data/app/components/ariadne/toggleable_controller/toggleable_controller.ts

@@ -0,0 +1,77 @@
+import type {TOutletChangeData} from '../outlet_manager_controller/outlet_manager_controller'
+import {useClickOutside} from 'stimulus-use'
+import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller'
+
+export interface ToggleableOutlet extends SyncedBooleanAttributesController<boolean> {
+  toggle: (event: Event, updateTo?: TOutletChangeData<boolean>) => void
+}
+
+export default class ToggleableController
+  extends SyncedBooleanAttributesController<boolean>
+  implements ToggleableOutlet
+{
+  static outlets = SyncedBooleanAttributesController.outlets
+  static values = {
+    ...SyncedBooleanAttributesController.values,
+    state: {
+      type: Boolean,
+      default: false,
+    },
+    closeOnOutsideClick: {
+      type: Boolean,
+      default: false,
+    },
+  }
+
+  declare stateValue: boolean
+  declare readonly closeOnOutsideClickValue: boolean
+
+  connect(): void {
+    this.syncElementAttributes()
+    useClickOutside(this, {dispatchEvent: this.closeOnOutsideClickValue && this.stateValue})
+  }
+
+  toggle(event: Event, updateTo: TOutletChangeData<boolean> = {}) {
+    const v = updateTo.data ?? !this.stateValue
+
+    this.updateAttributesForElement(this.element, v)
+    this.stateValue = v
+    this.sendToOutlets(event, {...updateTo, data: v})
+  }
+
+  on(event: Event) {
+    this.toggle(event, {data: true})
+  }
+
+  off(event: Event) {
+    this.toggle(event, {data: false})
+  }
+
+  clickOutside(event: Event) {
+    if (this.closeOnOutsideClickValue && this.stateValue) {
+      this.toggle(event, {data: false})
+    }
+  }
+
+  getValueForElement(element: Element): boolean | null {
+    if (element !== this.element) {
+      return null
+    }
+
+    return this.stateValue
+  }
+
+  getElementsToSync(): Element[] | null | undefined {
+    return [this.element]
+  }
+
+  getState() {
+    return this.stateValue
+  }
+
+  get event_key_postfix() {
+    return this.stateValue ? 'on' : 'off'
+  }
+
+  outletUpdate = this.toggle
+}

data/lib/ariadne/view_components/version.rb

@@ -3,6 +3,6 @@
 # :nocov:
 module Ariadne
   module ViewComponents
-    VERSION = "0.0.47"
+    VERSION = "0.0.49"
   end
 end

data/static/arguments.yml

@@ -574,6 +574,21 @@
     type: Hash
     default: "`{}`"
     description: "[Classes and attributes](/classes-attributes)"
+- component: SubheaderComponent
+  source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/subheader_component.rb
+  parameters:
+  - name: tag
+    type: Symbol, String
+    default: "`:p`"
+    description: The rendered tag name.
+  - name: classes
+    type: String
+    default: '`""`'
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: attributes
+    type: Hash
+    default: "`{}`"
+    description: "[Classes and attributes](/classes-attributes)"
 - component: TabComponent
   source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/tab_component.rb
   parameters:
@@ -702,6 +717,41 @@
     type: Hash
     default: "`{}`"
     description: "[Classes and attributes](/classes-attributes)"
+- component: ToggleComponent
+  source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/toggle_component.rb
+  parameters:
+  - name: classes
+    type: String
+    default: "`nil`"
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: color
+    type: String
+    default: "`:indigo`"
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: checked
+    type: Boolean
+    default: "`false`"
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: disabled
+    type: Boolean
+    default: "`false`"
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: size
+    type: String
+    default: "`:md`"
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: label
+    type: String
+    default: N/A
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: status_label_position
+    type: String
+    default: "`:start`"
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: attributes
+    type: Hash
+    default: "`{}`"
+    description: "[Classes and attributes](/classes-attributes)"
 - component: TooltipComponent
   source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/tooltip_component.rb
   parameters:

data/static/audited_at.json

@@ -1,14 +1,22 @@
 {
+  "Ariadne::ActionCardComponent": "",
   "Ariadne::AvatarComponent": "",
   "Ariadne::AvatarStackComponent": "",
   "Ariadne::BaseButton": "",
   "Ariadne::BaseComponent": "",
   "Ariadne::BlankslateComponent": "",
   "Ariadne::BodyComponent": "",
+  "Ariadne::BottomTabComponent": "",
+  "Ariadne::BottomTabNavComponent": "",
+  "Ariadne::BreadcrumbsComponent": "",
   "Ariadne::ButtonComponent": "",
+  "Ariadne::CheckboxComponent": "",
   "Ariadne::ClipboardCopyComponent": "",
+  "Ariadne::CloseButtonComponent": "",
+  "Ariadne::ComboboxComponent": "",
   "Ariadne::CommentComponent": "",
   "Ariadne::ContainerComponent": "",
+  "Ariadne::Content": "",
   "Ariadne::CounterComponent": "",
   "Ariadne::DetailsComponent": "",
   "Ariadne::Dropdown::MenuComponent": "",
@@ -24,15 +32,23 @@
   "Ariadne::HeroiconComponent": "",
   "Ariadne::ImageComponent": "",
   "Ariadne::InlineFlexComponent": "",
+  "Ariadne::LayoutComponent": "",
   "Ariadne::LinkComponent": "",
   "Ariadne::ListComponent": "",
   "Ariadne::ListComponent::ListItem": "",
+  "Ariadne::ModalComponent": "",
   "Ariadne::NarrowContainerComponent": "",
   "Ariadne::PanelBarComponent": "",
   "Ariadne::PanelBarComponent::PanelItem": "",
   "Ariadne::PillComponent": "",
+  "Ariadne::PopoverComponent": "",
+  "Ariadne::ProgressBarComponent": "",
+  "Ariadne::RelativeTimeComponent": "",
   "Ariadne::RichTextAreaComponent": "",
+  "Ariadne::ShowMoreButtonComponent": "",
   "Ariadne::SlideoverComponent": "",
+  "Ariadne::SpinnerComponent": "",
+  "Ariadne::SubheaderComponent": "",
   "Ariadne::TabComponent": "",
   "Ariadne::TabContainerComponent": "",
   "Ariadne::TabNavComponent": "",
@@ -48,5 +64,6 @@
   "Ariadne::Text": "",
   "Ariadne::TimeAgoComponent": "",
   "Ariadne::TimelineComponent": "",
+  "Ariadne::ToggleComponent": "",
   "Ariadne::TooltipComponent": ""
 }