ariadne_view_components 0.0.48 → 0.0.49

data/app/assets/javascripts/components/ariadne/events_controller/events_controller.d.ts

@@ -0,0 +1,4 @@
+import { Controller } from '@hotwired/stimulus';
+export default class EventsController extends Controller {
+    stopPropagation(e: Event): void;
+}

data/app/assets/javascripts/components/ariadne/options_controller/options_controller.d.ts

@@ -1,21 +1,40 @@
-import { Controller } from '@hotwired/stimulus';
-export default class OptionsController extends Controller {
+import { TOutletChangeData } from '../outlet_manager_controller/outlet_manager_controller';
+import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller';
+type TOptionKey = string | number;
+type TActiveOptions = {
+    [k: TOptionKey]: boolean;
+};
+export interface OptionsOutlet extends SyncedBooleanAttributesController<TActiveOptions> {
+    select: (e: Event, updateTo?: TOutletChangeData<TActiveOptions>) => void;
+}
+export default class OptionsController extends SyncedBooleanAttributesController<TActiveOptions> implements OptionsOutlet {
     #private;
+    static outlets: string[];
     static targets: string[];
     static values: {
-        activeIndex: {
-            type: NumberConstructor;
-            default: number;
+        activeOptions: ObjectConstructor;
+        isMulti: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        toggleable: {
+            type: BooleanConstructor;
+            default: boolean;
         };
         syncedAttrs: ArrayConstructor;
         antiAttrs: ArrayConstructor;
+        protectAttrs: BooleanConstructor;
+        outletEvents: ArrayConstructor;
     };
     readonly optionTargets: Array<Element>;
-    activeIndexValue: number;
-    readonly syncedAttrsValue: string[];
-    readonly hasSyncedAttrsValue: boolean;
-    readonly antiAttrsValue: string[];
-    readonly hasAntiAttrsValue: boolean;
+    activeOptionsValue: TActiveOptions;
+    readonly isMultiValue: boolean;
+    readonly toggleableValue: boolean;
+    optionTargetLookup: Map<Element, TOptionKey>;
     connect(): void;
-    select(e: Event, newIndex?: number): void;
+    select(event: Event, updateTo?: TOutletChangeData<TActiveOptions>): void;
+    getValueForElement(element: Element): boolean | null;
+    getState(): TActiveOptions;
+    outletUpdate: (event: Event, updateTo?: TOutletChangeData<TActiveOptions>) => void;
 }
+export {};

data/app/assets/javascripts/components/ariadne/outlet_manager_controller/outlet_manager_controller.d.ts

@@ -0,0 +1,42 @@
+import { Controller } from '@hotwired/stimulus';
+type TOutletEventLookup = boolean | {
+    [k: string]: TOutletEventLookup;
+};
+export type TOutletChangeData<T> = {
+    eventKey?: string;
+    data?: T;
+} | undefined;
+export default class OutletManagerController<T> extends Controller {
+    #private;
+    static values: {
+        outletEvents: ArrayConstructor;
+    };
+    readonly outletEventsValue: Array<string>;
+    readonly hasOutletEventsValue: boolean;
+    static outlets: string[];
+    readonly toggleableOutlets: Array<OutletManagerController<T>>;
+    readonly hasToggleableOutlet: boolean;
+    readonly optionsOutlets: Array<OutletManagerController<T>>;
+    readonly hasOptionsOutlet: boolean;
+    readonly stringMatchOutlets: Array<OutletManagerController<T>>;
+    readonly hasStringMatchOutlet: boolean;
+    outletEventsLookup: TOutletEventLookup | null;
+    static domEvents: {
+        [k: string]: boolean;
+    };
+    eventRecords: Map<Event, boolean>;
+    getOutlets(): Array<OutletManagerController<T>> | null | void;
+    outletUpdate(event: Event, data: TOutletChangeData<T>): void;
+    getState(): T;
+    connect(): void;
+    syncOutlets(): void;
+    sendToOutlets(event: Event, updateTo?: TOutletChangeData<T>): void;
+    isListeningForOutletEvent(eventTypes: string): boolean;
+    isDOMEventName(eventName: string): boolean;
+    getEventKey(event: Event): string;
+    hasHeardEvent(event: Event): boolean;
+    get event_key_prefix(): string;
+    get event_key_postfix(): string;
+    get outletEvents(): TOutletEventLookup;
+}
+export {};

data/app/assets/javascripts/components/ariadne/string_match_controller/string_match_controller.d.ts

@@ -0,0 +1,27 @@
+import { TOutletChangeData } from '../outlet_manager_controller/outlet_manager_controller';
+import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller';
+export interface StringMatchOutlet extends SyncedBooleanAttributesController<string> {
+    change: (event: Event, updateTo?: TOutletChangeData<string>) => void;
+}
+export default class StringMatchController extends SyncedBooleanAttributesController<string> implements StringMatchOutlet {
+    #private;
+    static outlets: string[];
+    static targets: string[];
+    static values: {
+        keyword: StringConstructor;
+        syncedAttrs: ArrayConstructor;
+        antiAttrs: ArrayConstructor;
+        protectAttrs: BooleanConstructor;
+        outletEvents: ArrayConstructor;
+    };
+    readonly matchTargets: Array<HTMLElement>;
+    readonly hasMatchTarget: boolean;
+    readonly emptyTarget: Element;
+    readonly hasEmptyTarget: boolean;
+    keywordValue: string;
+    change(event: Event, updateTo?: TOutletChangeData<string>): void;
+    getElementsToSync(): Element[] | null | undefined;
+    getValueForElement(element: Element): boolean;
+    getState(): string;
+    outletUpdate: (event: Event, updateTo?: TOutletChangeData<string>) => void;
+}

data/app/assets/javascripts/components/ariadne/synced_boolean_attributes_controller/synced_boolean_attributes_controller.d.ts

@@ -0,0 +1,44 @@
+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;
+}
+export default class SyncedBooleanAttributesController<T> extends OutletManagerController<T> {
+    #private;
+    static values: {
+        syncedAttrs: ArrayConstructor;
+        antiAttrs: ArrayConstructor;
+        protectAttrs: BooleanConstructor;
+        outletEvents: ArrayConstructor;
+    };
+    readonly syncedAttrsValue: string[];
+    readonly hasSyncedAttrsValue: boolean;
+    readonly antiAttrsValue: string[];
+    readonly hasAntiAttrsValue: boolean;
+    readonly protectAttrsValue: boolean;
+    static removeOnFalseAttrs: {
+        [k: string]: boolean;
+    };
+    syncedAttrsLookup: {
+        [k: string]: boolean;
+    } | null;
+    antiAttrsLookup: {
+        [k: string]: boolean;
+    } | null;
+    getValueForElement(element: Element): boolean | null;
+    getElementsToSync(): Array<Element> | null | undefined;
+    connect(): void;
+    updateAttributesForElement(element: Element, value: boolean): void;
+    syncElementAttributes(): void;
+    validateAttrChange(dispatchEvent: TStimulusDispatchEvent<TSyncAttrDetail>): void;
+}

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

@@ -1,34 +1,34 @@
-import { Controller } from '@hotwired/stimulus';
-export interface ToggleableOutlet {
-    toggle: (event: Event, value?: boolean) => void;
+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 Controller implements ToggleableOutlet {
-    #private;
+export default class ToggleableController extends SyncedBooleanAttributesController<boolean> implements ToggleableOutlet {
     static outlets: string[];
     static values: {
         state: {
             type: BooleanConstructor;
             default: boolean;
         };
-        syncedAttrs: ArrayConstructor;
-        antiAttrs: ArrayConstructor;
         closeOnOutsideClick: {
             type: BooleanConstructor;
             default: boolean;
         };
-    };
-    static removeOnFalseAttrs: {
-        [k: string]: boolean;
+        syncedAttrs: ArrayConstructor;
+        antiAttrs: ArrayConstructor;
+        protectAttrs: BooleanConstructor;
+        outletEvents: ArrayConstructor;
     };
     stateValue: boolean;
-    readonly toggleableOutlets: Array<ToggleableOutlet>;
-    readonly hasToggleableOutlet: boolean;
-    readonly syncedAttrsValue: string[];
-    readonly hasSyncedAttrsValue: boolean;
-    readonly antiAttrsValue: string[];
-    readonly hasAntiAttrsValue: boolean;
     readonly closeOnOutsideClickValue: boolean;
     connect(): void;
-    toggle(event: Event, value?: boolean): 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/ariadne.js

@@ -1,5 +1,7 @@
 import { Application } from '@hotwired/stimulus';
 import AriadneForm from './ariadne-form';
+import StringMatchController from './string_match_controller/string_match_controller';
+import EventsController from './events_controller/events_controller';
 import OptionsController from './options_controller/options_controller';
 import AccumulatorController from './accumulator_controller/accumulator_controller';
 import ToggleableController from './toggleable_controller/toggleable_controller';
@@ -20,3 +22,5 @@ application.register('tooltip-component', TooltipComponent);
 application.register('toggleable', ToggleableController);
 application.register('accumulator', AccumulatorController);
 application.register('options', OptionsController);
+application.register('string-match', StringMatchController);
+application.register('events', EventsController);

data/app/components/ariadne/ariadne.ts

@@ -2,6 +2,8 @@ import {Application} from '@hotwired/stimulus'
 
 import AriadneForm from './ariadne-form'
 
+import StringMatchController from './string_match_controller/string_match_controller'
+import EventsController from './events_controller/events_controller'
 import OptionsController from './options_controller/options_controller'
 import AccumulatorController from './accumulator_controller/accumulator_controller'
 import ToggleableController from './toggleable_controller/toggleable_controller'
@@ -25,3 +27,5 @@ application.register('tooltip-component', TooltipComponent)
 application.register('toggleable', ToggleableController)
 application.register('accumulator', AccumulatorController)
 application.register('options', OptionsController)
+application.register('string-match', StringMatchController)
+application.register('events', EventsController)

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

@@ -1,4 +1,4 @@
-<%= render Ariadne::ButtonComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do |component| %>
+<%= render Ariadne::ButtonComponent.new(tag: @tag, classes: @classes, scheme: @scheme, attributes: @attributes) do |component| %>
   <%= render Ariadne::HeroiconComponent.new(icon: "x-mark", variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, classes: @icon_classes, size: @size) do |icon| %>
   <% end %>
 <% end %>

data/app/components/ariadne/close_button_component.rb

@@ -15,7 +15,7 @@ module Ariadne
     # @param tag [Symbol, String] The rendered tag name.
     # @param classes [String] <%= link_to_classes_docs %>
     # @param attributes [Hash] <%= link_to_attributes_docs %>
-    def initialize(tag: DEFAULT_TAG, classes: "", icon_classes: "", size: :xs, aria_label: nil, attributes: {})
+    def initialize(tag: DEFAULT_TAG, classes: "", icon_classes: "", size: :xs, aria_label: nil, scheme: :none, attributes: {})
       raise ArgumentError, "An 'aria_label' argument is required to use a Close Button. Include as much detail as you can about what the button will be closing." if aria_label.blank?
 
       @tag = check_incoming_tag(DEFAULT_TAG, tag)
@@ -25,6 +25,7 @@ module Ariadne
         classes,
       )
 
+      @scheme = scheme
       @size = size
       @icon_classses = icon_classes
     end

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

@@ -0,0 +1,14 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
+  <%= render Ariadne::BaseComponent.new(tag: :input, classes: @input_classes, attributes: @input_attributes) do %>
+    <% if icon? %>
+      <%= icon %>
+    <% else %>
+      <%= Ariadne::HeroiconComponent.new(icon: :cube, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE) %>
+    <% end %>
+  <% end %>
+  <%= render Ariadne::BaseComponent.new(tag: @options_wrapper_tag, classes: @options_wrapper_classes, attributes: @options_wrapper_attributes) do %>
+    <% options.each do |option| %>
+      <%= option %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/ariadne/combobox_component.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Input with a dropdown selection
+  class ComboboxComponent < Ariadne::Component
+    DEFAULT_TAG = :div
+    DEFAULT_OPTIONS_WRAPPER_TAG = :div
+    TAG_OPTIONS = [DEFAULT_TAG].freeze
+
+    DEFAULT_CLASSES = {
+      wrapper: "ariadne-group ariadne-w-fit ariadne-relative",
+      options_wrapper: "group-data-[toggleable-state-value=false]:ariadne-hidden ariadne-absolute ariadne-w-full ariadne-z-10",
+      input: "",
+    }
+
+    DEFAULT_ATTRIBUTES = {
+      wrapper: {
+        "data-controller": "options toggleable string-match",
+      },
+      options_wrapper: {},
+      input: {
+        type: "text",
+        autocomplete: "off",
+        "data-action": "input->string-match#change focusin->toggleable#on",
+      },
+    }
+
+    renders_many :options
+
+    renders_one :icon, Ariadne::HeroiconComponent
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::ComboboxComponent.new) { "Example" } %>
+    #
+    # @param tag [Symbol, String] The rendered tag name.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(
+      tag: DEFAULT_TAG,
+      classes: "",
+      attributes: {},
+      options_tag: DEFAULT_OPTIONS_WRAPPER_TAG,
+      options_wrapper_classes: "",
+      options_wrapper_attributes: {},
+      close_on_outside_click: true,
+      close_on_select: false,
+      initially_open: false,
+      single_selection: false,
+      toggleable_options: true, # Do options unselect if clicked a second time
+      input_classes: "",
+      input_attributes: {}
+    )
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
+      @attributes = DEFAULT_ATTRIBUTES[:wrapper]
+        .merge({
+          "data-options-is-multi-value": !single_selection,
+          "data-options-toggleable-value": toggleable_options,
+          "data-toggleable-close-on-outside-click-value": close_on_outside_click,
+          "data-toggleable-state-value": initially_open,
+
+        })
+        .merge(attributes)
+
+      @input_classes = merge_class_names(DEFAULT_CLASSES[:input], input_classes)
+      @input_attributes = DEFAULT_ATTRIBUTES[:input].merge(input_attributes)
+
+      @options_wrapper_tag = check_incoming_tag(DEFAULT_OPTIONS_WRAPPER_TAG, options_tag)
+      @options_wrapper_classes = merge_class_names(DEFAULT_CLASSES[:options_wrapper], options_wrapper_classes)
+      @options_wrapper_attributes = DEFAULT_ATTRIBUTES[:options_wrapper]
+        .merge({ "data-action": close_on_select ? "click->toggleable#off" : "" })
+        .merge(options_wrapper_attributes)
+    end
+  end
+end

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

@@ -0,0 +1,4 @@
+import { Controller } from '@hotwired/stimulus';
+export default class EventsController extends Controller {
+    stopPropagation(e: Event): void;
+}

data/app/components/ariadne/events_controller/events_controller.js

@@ -0,0 +1,6 @@
+import { Controller } from '@hotwired/stimulus';
+export default class EventsController extends Controller {
+    stopPropagation(e) {
+        e.stopPropagation();
+    }
+}

data/app/components/ariadne/events_controller/events_controller.ts

@@ -0,0 +1,7 @@
+import {Controller} from '@hotwired/stimulus'
+
+export default class EventsController extends Controller {
+  stopPropagation(e: Event) {
+    e.stopPropagation()
+  }
+}

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

@@ -0,0 +1,21 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
+  <% if sidecars? %>
+    <%= render Ariadne::BaseComponent.new(tag: @sidecar_tag, classes: @sidecar_classes, attributes: @sidecar_attributes) do %>
+      <% sidecars.each do |sidecar| %>
+        <%= sidecar %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <%= render Ariadne::BaseComponent.new(tag: @main_tag, classes: @main_classes, attributes: @main_attributes) do %>
+    <% mains.each do |main| %>
+      <%= main %>
+    <% end %>
+  <% end %>
+  <% if asides? %>
+    <%= render Ariadne::BaseComponent.new(tag: @aside_tag, classes: @aside_classes, attributes: @aside_attributes) do %>
+      <% asides.each do |aside| %>
+        <%= aside %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/ariadne/layout_component.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Layout component to control the widths of 1-3 columns
+  class LayoutComponent < Ariadne::Component
+    DEFAULT_TAG = :div
+    DEFAULT_SIDECAR_TAG = :div
+    DEFAULT_ASIDE_TAG = :div
+    DEFAULT_MAIN_TAG = :div
+
+    DEFAULT_CLASSES = {
+      wrapper: "ariadne-group ariadne-flex ariadne-gap-2 ariadne-flex-col md:ariadne-flex-row",
+      sidecar: "ariadne-w-full md:ariadne-w-1/6",
+      main: "ariadne-grow",
+      aside: "ariadne-w-full md:ariadne-w-1/6",
+    }
+
+    DEFAULT_ATTRIBUTES = {
+      wrapper: {},
+      sidecar: {},
+      main: {},
+      aside: {},
+    }
+
+    renders_many :sidecars
+
+    renders_many :mains
+
+    renders_many :asides
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::LayoutComponent.new) { "Example" } %>
+    #
+    # @param tag [Symbol, String] The rendered tag name.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(
+      tag: DEFAULT_TAG,
+      classes: "",
+      attributes: {},
+      main_tag: DEFAULT_MAIN_TAG,
+      main_classes: "",
+      main_attributes: {},
+      sidecar_tag: DEFAULT_SIDECAR_TAG,
+      sidecar_classes: "",
+      sidecar_attributes: {},
+      aside_tag: DEFAULT_ASIDE_TAG,
+      aside_classes: "",
+      aside_attributes: {}
+    )
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
+      @attributes = DEFAULT_ATTRIBUTES[:wrapper].merge(attributes)
+
+      @sidecar_tag = check_incoming_tag(DEFAULT_SIDECAR_TAG, tag)
+      @sidecar_attributes = DEFAULT_ATTRIBUTES[:sidecar].merge(sidecar_attributes)
+      @sidecar_classes = merge_class_names(DEFAULT_CLASSES[:sidecar], sidecar_classes)
+
+      @main_tag = check_incoming_tag(DEFAULT_MAIN_TAG, tag)
+      @main_attributes = DEFAULT_ATTRIBUTES[:main].merge(main_attributes)
+      @main_classes = merge_class_names(DEFAULT_CLASSES[:main], main_classes)
+
+      @aside_tag = check_incoming_tag(DEFAULT_ASIDE_TAG, tag)
+      @aside_attributes = DEFAULT_ATTRIBUTES[:aside].merge(aside_attributes)
+      @aside_classes = merge_class_names(DEFAULT_CLASSES[:aside], aside_classes)
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
+  <%= base %>
+  <%= render Ariadne::BaseComponent.new(tag: @shadow_tag, classes: @shadow_classes, attributes: @shadow_attributes) do %>
+    <div class="<%= @content_classes %>" data-controller="events" data-action="click->events#stopPropagation">
+      <%= render Ariadne::CloseButtonComponent.new(classes: @close_button_classes, aria_label: @close_button_aria_label, attributes: { "data-action": "click->toggleable#toggle" }) %>
+      <% items.each do |item| %>
+        <%= item %>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/ariadne/modal_component.rb

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Renders a full screen modal
+  class ModalComponent < Ariadne::Component
+    DEFAULT_TAG = :div
+    DEFAULT_SHADOW_TAG = :div
+    TAG_OPTIONS = [DEFAULT_TAG].freeze
+
+    DEFAULT_CLASSES = {
+      wrapper: "ariadne-group",
+      shadow: "ariadne-w-screen ariadne-h-screen ariadne-bg-black/20 ariadne-fixed ariadne-top-0 ariadne-left-0 ariadne-flex ariadne-justify-center ariadne-items-center data-[close-on-click=true]:ariadne-cursor-pointer",
+      content: "ariadne-bg-white ariadne-p-2 ariadne-relative ariadne-cursor-default",
+      close_button: "ariadne-absolute ariadne-right-2 ariadne-pt-1 ariadne-pb-1 ariadne-pl-1 ariadne-pr-1",
+    }
+
+    DEFAULT_ATTRIBUTES = {
+      wrapper: {
+        "data-controller": "toggleable",
+        "data-action": "click->toggleable#toggle",
+        "data-toggleable-anti-attrs-value": '["aria-hidden"]',
+      },
+      shadow: {},
+      content: { role: :dialog },
+      close_button: {},
+    }
+
+    SHADOW_VISIBILITY_CLASSES = "group-aria-hidden:ariadne-hidden"
+
+    renders_one :base
+
+    renders_many :items
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::ModalComponent.new) { "Example" } %>
+    #
+    # @param tag [Symbol, String] The rendered tag name.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(
+      tag: DEFAULT_TAG,
+      classes: "",
+      attributes: {},
+      initial_visible: false,
+      shadow_tag: DEFAULT_SHADOW_TAG,
+      shadow_classes: "",
+      shadow_attributes: {},
+      content_classes: "",
+      content_attributes: {},
+      close_button_classes: "",
+      close_button_attributes: {},
+      close_button_aria_label: "Close modal button",
+      close_on_shadow_click: true
+    )
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
+      @attributes = DEFAULT_ATTRIBUTES[:wrapper]
+        .merge({
+          "aria-hidden": true,
+          "data-toggleable-state-value": false,
+        })
+        .merge(attributes)
+
+      @initial_visible = initial_visible
+      @shadow_tag = check_incoming_tag(DEFAULT_SHADOW_TAG, shadow_tag)
+      @shadow_classes = merge_class_names(
+        DEFAULT_CLASSES[:shadow],
+        SHADOW_VISIBILITY_CLASSES,
+        shadow_classes,
+      )
+      @shadow_attributes = DEFAULT_ATTRIBUTES[:shadow]
+        .merge({
+          "data-controller": "events",
+          "data-close-on-click": close_on_shadow_click,
+          "data-action": close_on_shadow_click ? "" : "click->events#stopPropagation",
+        })
+        .merge(shadow_attributes)
+
+      @content_classes = merge_class_names(DEFAULT_CLASSES[:content], content_classes)
+      @content_attributes = DEFAULT_ATTRIBUTES[:content].merge(content_attributes)
+
+      @close_button_aria_label = close_button_aria_label
+      @close_button_classes = merge_class_names(DEFAULT_CLASSES[:close_button], close_button_classes)
+      @close_button_attributes = DEFAULT_ATTRIBUTES[:content].merge(content_attributes)
+    end
+  end
+end

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

@@ -1,21 +1,40 @@
-import { Controller } from '@hotwired/stimulus';
-export default class OptionsController extends Controller {
+import { TOutletChangeData } from '../outlet_manager_controller/outlet_manager_controller';
+import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller';
+type TOptionKey = string | number;
+type TActiveOptions = {
+    [k: TOptionKey]: boolean;
+};
+export interface OptionsOutlet extends SyncedBooleanAttributesController<TActiveOptions> {
+    select: (e: Event, updateTo?: TOutletChangeData<TActiveOptions>) => void;
+}
+export default class OptionsController extends SyncedBooleanAttributesController<TActiveOptions> implements OptionsOutlet {
     #private;
+    static outlets: string[];
     static targets: string[];
     static values: {
-        activeIndex: {
-            type: NumberConstructor;
-            default: number;
+        activeOptions: ObjectConstructor;
+        isMulti: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        toggleable: {
+            type: BooleanConstructor;
+            default: boolean;
         };
         syncedAttrs: ArrayConstructor;
         antiAttrs: ArrayConstructor;
+        protectAttrs: BooleanConstructor;
+        outletEvents: ArrayConstructor;
     };
     readonly optionTargets: Array<Element>;
-    activeIndexValue: number;
-    readonly syncedAttrsValue: string[];
-    readonly hasSyncedAttrsValue: boolean;
-    readonly antiAttrsValue: string[];
-    readonly hasAntiAttrsValue: boolean;
+    activeOptionsValue: TActiveOptions;
+    readonly isMultiValue: boolean;
+    readonly toggleableValue: boolean;
+    optionTargetLookup: Map<Element, TOptionKey>;
     connect(): void;
-    select(e: Event, newIndex?: number): void;
+    select(event: Event, updateTo?: TOutletChangeData<TActiveOptions>): void;
+    getValueForElement(element: Element): boolean | null;
+    getState(): TActiveOptions;
+    outletUpdate: (event: Event, updateTo?: TOutletChangeData<TActiveOptions>) => void;
 }
+export {};