ariadne_view_components 0.0.48 → 0.0.49

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/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/toggleable_controller/toggleable_controller.js

@@ -1,74 +1,54 @@
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var _ToggleableController_instances, _ToggleableController_updateAllAttrs, _ToggleableController_setAttrs, _ToggleableController_updateOutlets;
-import { Controller } from '@hotwired/stimulus';
 import { useClickOutside } from 'stimulus-use';
-class ToggleableController extends Controller {
+import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller';
+class ToggleableController extends SyncedBooleanAttributesController {
     constructor() {
         super(...arguments);
-        _ToggleableController_instances.add(this);
+        this.outletUpdate = this.toggle;
     }
     connect() {
-        __classPrivateFieldGet(this, _ToggleableController_instances, "m", _ToggleableController_updateAllAttrs).call(this);
-        __classPrivateFieldGet(this, _ToggleableController_instances, "m", _ToggleableController_updateOutlets).call(this, new Event('Init'));
-        useClickOutside(this, { dispatchEvent: this.closeOnOutsideClickValue });
+        this.syncElementAttributes();
+        useClickOutside(this, { dispatchEvent: this.closeOnOutsideClickValue && this.stateValue });
     }
-    toggle(event, value) {
-        this.stateValue = value !== null && value !== void 0 ? value : !this.stateValue;
-        __classPrivateFieldGet(this, _ToggleableController_instances, "m", _ToggleableController_updateAllAttrs).call(this);
-        __classPrivateFieldGet(this, _ToggleableController_instances, "m", _ToggleableController_updateOutlets).call(this, event);
+    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.toggle(event, false);
+        if (this.closeOnOutsideClickValue && this.stateValue) {
+            this.toggle(event, { data: false });
         }
     }
-}
-_ToggleableController_instances = new WeakSet(), _ToggleableController_updateAllAttrs = function _ToggleableController_updateAllAttrs() {
-    if (this.hasSyncedAttrsValue) {
-        __classPrivateFieldGet(this, _ToggleableController_instances, "m", _ToggleableController_setAttrs).call(this, this.syncedAttrsValue);
+    getValueForElement(element) {
+        if (element !== this.element) {
+            return null;
+        }
+        return this.stateValue;
     }
-    if (this.hasAntiAttrsValue) {
-        __classPrivateFieldGet(this, _ToggleableController_instances, "m", _ToggleableController_setAttrs).call(this, this.antiAttrsValue, false);
+    getElementsToSync() {
+        return [this.element];
     }
-}, _ToggleableController_setAttrs = function _ToggleableController_setAttrs(attrs, matchState = true) {
-    const attrState = String(matchState ? this.stateValue : !this.stateValue);
-    for (let index in attrs) {
-        const attr = attrs[index];
-        if (attrState === 'false' && ToggleableController.removeOnFalseAttrs[attr]) {
-            this.element.removeAttribute(attr);
-        }
-        else {
-            this.element.setAttribute(attr, attrState);
-        }
+    getState() {
+        return this.stateValue;
     }
-}, _ToggleableController_updateOutlets = function _ToggleableController_updateOutlets(event) {
-    if (this.hasToggleableOutlet) {
-        for (let index in this.toggleableOutlets) {
-            const outlet = this.toggleableOutlets[index];
-            outlet.toggle(event, this.stateValue);
-        }
+    get event_key_postfix() {
+        return this.stateValue ? 'on' : 'off';
     }
-};
-ToggleableController.outlets = ['toggleable'];
-ToggleableController.values = {
-    state: {
+}
+ToggleableController.outlets = SyncedBooleanAttributesController.outlets;
+ToggleableController.values = Object.assign(Object.assign({}, SyncedBooleanAttributesController.values), { state: {
         type: Boolean,
         default: false,
-    },
-    syncedAttrs: Array,
-    antiAttrs: Array,
-    closeOnOutsideClick: {
+    }, closeOnOutsideClick: {
         type: Boolean,
         default: false,
-    },
-};
-// Some attributes are only false in HTML if they don't exist
-// If included here, the property will be deleted on "false"
-ToggleableController.removeOnFalseAttrs = {
-    checked: true,
-};
+    } });
 export default ToggleableController;

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

@@ -1,87 +1,77 @@
-import {Controller} from '@hotwired/stimulus'
+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 {
-  toggle: (event: Event, value?: boolean) => void
+export interface ToggleableOutlet extends SyncedBooleanAttributesController<boolean> {
+  toggle: (event: Event, updateTo?: TOutletChangeData<boolean>) => void
 }
 
-export default class ToggleableController extends Controller implements ToggleableOutlet {
-  static outlets = ['toggleable']
+export default class ToggleableController
+  extends SyncedBooleanAttributesController<boolean>
+  implements ToggleableOutlet
+{
+  static outlets = SyncedBooleanAttributesController.outlets
   static values = {
+    ...SyncedBooleanAttributesController.values,
     state: {
       type: Boolean,
       default: false,
     },
-    syncedAttrs: Array,
-    antiAttrs: Array,
     closeOnOutsideClick: {
       type: Boolean,
       default: false,
     },
   }
 
-  // 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,
-  }
-
   declare stateValue: boolean
-  declare readonly toggleableOutlets: Array<ToggleableOutlet>
-  declare readonly hasToggleableOutlet: boolean
-  declare readonly syncedAttrsValue: string[]
-  declare readonly hasSyncedAttrsValue: boolean
-  declare readonly antiAttrsValue: string[]
-  declare readonly hasAntiAttrsValue: boolean
   declare readonly closeOnOutsideClickValue: boolean
 
   connect(): void {
-    this.#updateAllAttrs()
-    this.#updateOutlets(new Event('Init'))
-    useClickOutside(this, {dispatchEvent: this.closeOnOutsideClickValue})
+    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})
   }
 
-  toggle(event: Event, value?: boolean) {
-    this.stateValue = value ?? !this.stateValue
+  on(event: Event) {
+    this.toggle(event, {data: true})
+  }
 
-    this.#updateAllAttrs()
-    this.#updateOutlets(event)
+  off(event: Event) {
+    this.toggle(event, {data: false})
   }
 
   clickOutside(event: Event) {
-    if (this.closeOnOutsideClickValue) {
-      this.toggle(event, false)
+    if (this.closeOnOutsideClickValue && this.stateValue) {
+      this.toggle(event, {data: false})
     }
   }
 
-  #updateAllAttrs() {
-    if (this.hasSyncedAttrsValue) {
-      this.#setAttrs(this.syncedAttrsValue)
+  getValueForElement(element: Element): boolean | null {
+    if (element !== this.element) {
+      return null
     }
 
-    if (this.hasAntiAttrsValue) {
-      this.#setAttrs(this.antiAttrsValue, false)
-    }
+    return this.stateValue
   }
 
-  #setAttrs(attrs: string[], matchState = true) {
-    const attrState = String(matchState ? this.stateValue : !this.stateValue)
-    for (let index in attrs) {
-      const attr = attrs[index]
-      if (attrState === 'false' && ToggleableController.removeOnFalseAttrs[attr]) {
-        this.element.removeAttribute(attr)
-      } else {
-        this.element.setAttribute(attr, attrState)
-      }
-    }
+  getElementsToSync(): Element[] | null | undefined {
+    return [this.element]
   }
 
-  #updateOutlets(event: Event) {
-    if (this.hasToggleableOutlet) {
-      for (let index in this.toggleableOutlets) {
-        const outlet = this.toggleableOutlets[index]
-        outlet.toggle(event, this.stateValue)
-      }
-    }
+  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.48"
+    VERSION = "0.0.49"
   end
 end

data/static/audited_at.json

@@ -13,6 +13,7 @@
   "Ariadne::CheckboxComponent": "",
   "Ariadne::ClipboardCopyComponent": "",
   "Ariadne::CloseButtonComponent": "",
+  "Ariadne::ComboboxComponent": "",
   "Ariadne::CommentComponent": "",
   "Ariadne::ContainerComponent": "",
   "Ariadne::Content": "",
@@ -31,9 +32,11 @@
   "Ariadne::HeroiconComponent": "",
   "Ariadne::ImageComponent": "",
   "Ariadne::InlineFlexComponent": "",
+  "Ariadne::LayoutComponent": "",
   "Ariadne::LinkComponent": "",
   "Ariadne::ListComponent": "",
   "Ariadne::ListComponent::ListItem": "",
+  "Ariadne::ModalComponent": "",
   "Ariadne::NarrowContainerComponent": "",
   "Ariadne::PanelBarComponent": "",
   "Ariadne::PanelBarComponent::PanelItem": "",

data/static/constants.json

@@ -214,6 +214,30 @@
       "button"
     ]
   },
+  "Ariadne::ComboboxComponent": {
+    "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"
+      }
+    },
+    "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_OPTIONS_WRAPPER_TAG": "div",
+    "DEFAULT_TAG": "div",
+    "TAG_OPTIONS": [
+      "div"
+    ]
+  },
   "Ariadne::CommentComponent": {
     "DEFAULT_CLASSES": "ariadne-border-gray-300 ariadne-border ariadne-shadow ariadne-py-5 ariadne-px-5 ariadne-rounded-md ",
     "DEFAULT_TAG": "div",
@@ -496,6 +520,28 @@
       "open"
     ]
   },
+  "Ariadne::LayoutComponent": {
+    "DEFAULT_ASIDE_TAG": "div",
+    "DEFAULT_ATTRIBUTES": {
+      "wrapper": {
+      },
+      "sidecar": {
+      },
+      "main": {
+      },
+      "aside": {
+      }
+    },
+    "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_MAIN_TAG": "div",
+    "DEFAULT_SIDECAR_TAG": "div",
+    "DEFAULT_TAG": "div"
+  },
   "Ariadne::LinkComponent": {
     "DEFAULT_ACTIONABLE_CLASSES": "ariadne-cursor-pointer ariadne-font-semibold ariadne-underline ariadne-decoration-double",
     "DEFAULT_CLASSES": "ariadne-cursor-pointer hover:ariadne-text-button-text-color focus:ariadne-outline-none focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500",
@@ -513,6 +559,34 @@
   "Ariadne::ListComponent::ListItem": {
     "DEFAULT_ITEM_CLASSES": "ariadne-relative ariadne-p-1.5 focus:ariadne-ring-2 focus:ariadne-ring-offset-2 focus:ariadne-ring-purple-500 hover:ariadne-bg-button-hover-color"
   },
+  "Ariadne::ModalComponent": {
+    "DEFAULT_ATTRIBUTES": {
+      "wrapper": {
+        "data-controller": "toggleable",
+        "data-action": "click->toggleable#toggle",
+        "data-toggleable-anti-attrs-value": "[\"aria-hidden\"]"
+      },
+      "shadow": {
+      },
+      "content": {
+        "role": "dialog"
+      },
+      "close_button": {
+      }
+    },
+    "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_SHADOW_TAG": "div",
+    "DEFAULT_TAG": "div",
+    "SHADOW_VISIBILITY_CLASSES": "group-aria-hidden:ariadne-hidden",
+    "TAG_OPTIONS": [
+      "div"
+    ]
+  },
   "Ariadne::NarrowContainerComponent": {
     "DEFAULT_CLASSES": "ariadne-max-w-7xl ariadne-mx-auto ariadne-py-12 ariadne-px-4 sm:ariadne-px-6 lg:ariadne-py-16 lg:ariadne-px-8",
     "DEFAULT_TAG": "div",

data/static/statuses.json

@@ -13,6 +13,7 @@
   "Ariadne::CheckboxComponent": "stable",
   "Ariadne::ClipboardCopyComponent": "stable",
   "Ariadne::CloseButtonComponent": "stable",
+  "Ariadne::ComboboxComponent": "stable",
   "Ariadne::CommentComponent": "stable",
   "Ariadne::ContainerComponent": "stable",
   "Ariadne::Content": "stable",
@@ -31,9 +32,11 @@
   "Ariadne::HeroiconComponent": "stable",
   "Ariadne::ImageComponent": "stable",
   "Ariadne::InlineFlexComponent": "stable",
+  "Ariadne::LayoutComponent": "stable",
   "Ariadne::LinkComponent": "stable",
   "Ariadne::ListComponent": "stable",
   "Ariadne::ListComponent::ListItem": "stable",
+  "Ariadne::ModalComponent": "stable",
   "Ariadne::NarrowContainerComponent": "stable",
   "Ariadne::PanelBarComponent": "stable",
   "Ariadne::PanelBarComponent::PanelItem": "stable",