lightning_ui_kit 0.3.3 → 0.3.4

data/app/components/lightning_ui_kit/accordion_component.html.erb

@@ -0,0 +1,5 @@
+<%= tag.div(class: classes, data: data) do %>
+  <% items.each do |item| %>
+    <%= item %>
+  <% end %>
+<% end %>

data/app/components/lightning_ui_kit/accordion_component.rb

@@ -0,0 +1,22 @@
+class LightningUiKit::AccordionComponent < LightningUiKit::BaseComponent
+  renders_many :items, LightningUiKit::Accordion::ItemComponent
+
+  def initialize(open_first: true, **options)
+    @open_first = open_first
+    @options = options
+  end
+
+  def classes
+    merge_classes([
+      "lui:divide-y lui:divide-border",
+      @options[:class]
+    ].compact.join(" "))
+  end
+
+  def data
+    {
+      controller: "lui-accordion",
+      lui_accordion_open_first_value: @open_first
+    }.merge(@options[:data] || {})
+  end
+end

data/app/components/lightning_ui_kit/alert_component.html.erb

@@ -1,4 +1,15 @@
-<%= tag.div class: classes do %>
-  <%= heroicon("information-circle", options: { class: "lui:w-4 lui:h-4 lui:me-3 lui:shrink-0 lui:inline" }) %>
-  <%= content %>
+<%= tag.div(class: classes, role: "alert", data: @title ? { type: @type, controller: "lui-alert" } : { type: @type }) do %>
+  <%= heroicon(icon, variant: @title ? :outline : :solid, options: { class: icon_classes }) %>
+  <span class="lui:sr-only"><%= @type.to_s.humanize %></span>
+  <% if @title %>
+    <h5 class="<%= title_classes %>"><%= @title %></h5>
+    <div class="lui:text-foreground-secondary"><%= content %></div>
+    <% if footer.present? %>
+      <div class="lui:mt-3">
+        <%= footer %>
+      </div>
+    <% end %>
+  <% else %>
+    <%= content %>
+  <% end %>
 <% end %>

data/app/components/lightning_ui_kit/alert_component.rb

@@ -1,14 +1,67 @@
 class LightningUiKit::AlertComponent < LightningUiKit::BaseComponent
-  def initialize(type: :info, **options)
+  renders_one :footer
+
+  def initialize(title: nil, type: :info, **options)
+    @title = title
     @type = type
     @options = options
   end
 
-  def default_classes
-    "lui:flex lui:items-center lui:p-4 lui:text-sm lui:text-neutral-text lui:rounded-lg lui:bg-neutral-bg"
+  def classes
+    merge_classes([base_classes, type_classes, @options[:class]].compact.join(" "))
   end
 
-  def classes
-    [default_classes, @options[:class]].compact.join(" ")
+  def icon
+    case @type
+    when :error then "exclamation-triangle"
+    when :success then "check-circle"
+    when :warning then "exclamation-triangle"
+    else "information-circle"
+    end
+  end
+
+  def icon_classes
+    base = if @title
+      "lui:absolute lui:left-4 lui:top-4 lui:size-4"
+    else
+      "lui:size-4 lui:me-3 lui:shrink-0"
+    end
+
+    case @type
+    when :error then "#{base} lui:text-destructive-text"
+    when :success then "#{base} lui:text-success-text"
+    when :warning then "#{base} lui:text-warning-text"
+    else "#{base} lui:text-foreground"
+    end
+  end
+
+  def title_classes
+    base = "lui:mb-1 lui:font-medium lui:leading-none lui:tracking-tight"
+    case @type
+    when :error then "#{base} lui:text-destructive-text"
+    when :success then "#{base} lui:text-success-text"
+    when :warning then "#{base} lui:text-warning-text"
+    else base
+    end
+  end
+
+  private
+
+  def base_classes
+    shared = "lui:text-sm lui:text-foreground lui:rounded-lg lui:border lui:transition-opacity lui:duration-300 lui:ease-out lui:opacity-100"
+    if @title
+      "lui:relative lui:w-full #{shared} lui:py-4 lui:pl-11 lui:pr-4"
+    else
+      "lui:flex lui:items-center #{shared} lui:p-4"
+    end
+  end
+
+  def type_classes
+    case @type
+    when :error then "lui:border-destructive-border/50"
+    when :success then "lui:border-success-indicator/50"
+    when :warning then "lui:border-warning-indicator/50"
+    else "lui:border-border"
+    end
   end
 end

data/app/components/lightning_ui_kit/card_component.html.erb

@@ -0,0 +1,34 @@
+<%= tag.div(class: classes, data: data) do %>
+  <% if header? || title? || description? || action? %>
+    <div data-slot="card-header" class="lui:grid lui:auto-rows-min lui:grid-rows-[auto_auto] lui:items-start lui:gap-1.5 lui:px-6 <%= 'lui:grid-cols-[1fr_auto]' if action? %>">
+      <% if header? %>
+        <%= header %>
+      <% end %>
+      <% if title? %>
+        <div data-slot="card-title" class="lui:text-base lui:leading-none lui:font-semibold lui:tracking-tight lui:text-foreground">
+          <%= title %>
+        </div>
+      <% end %>
+      <% if description? %>
+        <div data-slot="card-description" class="lui:text-foreground-muted lui:text-sm/relaxed">
+          <%= description %>
+        </div>
+      <% end %>
+      <% if action? %>
+        <div data-slot="card-action" class="lui:col-start-2 lui:row-span-2 lui:row-start-1 lui:self-start lui:justify-self-end">
+          <%= action %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+  <% if content.present? %>
+    <div data-slot="card-content" class="lui:px-6">
+      <%= content %>
+    </div>
+  <% end %>
+  <% if footer? %>
+    <div data-slot="card-footer" class="lui:flex lui:items-center lui:gap-4 lui:border-t lui:border-border lui:px-6 lui:pt-6">
+      <%= footer %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/lightning_ui_kit/card_component.rb

@@ -0,0 +1,22 @@
+class LightningUiKit::CardComponent < LightningUiKit::BaseComponent
+  renders_one :header
+  renders_one :title
+  renders_one :description
+  renders_one :footer
+  renders_one :action
+
+  def initialize(**options)
+    @options = options
+  end
+
+  def classes
+    merge_classes([
+      "lui:flex lui:flex-col lui:gap-6 lui:rounded-xl lui:border lui:border-border lui:bg-surface lui:py-6 lui:text-foreground lui:shadow-sm",
+      @options[:class]
+    ].compact.join(" "))
+  end
+
+  def data
+    @options[:data] || {}
+  end
+end

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

@@ -1,7 +1,7 @@
-<div class="lui:relative lui:isolate lui:flex lui:h-screen lui:w-full lui:bg-surface lui:max-lg:flex-col lui:max-lg:h-auto lui:max-lg:min-h-screen lui:lg:bg-surface-aside lui:overflow-hidden" data-controller="lui-layout">
+<div class="lui-page-gradient lui:relative lui:isolate lui:flex lui:h-screen lui:w-full lui:bg-surface-page lui:max-lg:flex-col lui:max-lg:h-auto lui:max-lg:min-h-screen lui:overflow-hidden" data-controller="lui-layout">
   <%# Desktop Sidebar (fixed, hidden on mobile) %>
   <div class="lui:fixed lui:inset-y-0 lui:left-0 <%= sidebar_width_class %> lui:max-lg:hidden lui:z-10">
-    <nav class="lui:flex lui:h-full lui:min-h-0 lui:flex-col">
+    <nav class="lui:flex lui:h-full lui:min-h-0 lui:flex-col lui:bg-surface-aside lui:backdrop-blur-[24px] lui:backdrop-saturate-150">
       <%# Sidebar content %>
       <div class="lui:flex lui:flex-1 lui:flex-col lui:overflow-y-auto lui:p-4">
         <% if header? %>
@@ -64,7 +64,7 @@
     ></div>
 
     <%# Mobile Sidebar Panel %>
-    <div class="lui:fixed lui:inset-y-0 lui:left-0 <%= sidebar_width_class %> lui:bg-surface-aside lui:-translate-x-full lui:transition-transform lui:duration-300 lui:ease-out lui:shadow-xl lui:group-data-[open]:translate-x-0">
+    <div class="lui:fixed lui:inset-y-0 lui:left-0 <%= sidebar_width_class %> lui:bg-surface-page lui:-translate-x-full lui:transition-transform lui:duration-300 lui:ease-out lui:shadow-xl lui:group-data-[open]:translate-x-0">
       <nav class="lui:flex lui:h-full lui:min-h-0 lui:flex-col">
         <%# Close button %>
         <div class="lui:flex lui:items-center lui:justify-end lui:p-4">

data/app/components/lightning_ui_kit/radio_group/option_component.html.erb

@@ -0,0 +1 @@
+<%= content %>

data/app/components/lightning_ui_kit/radio_group/option_component.rb

@@ -0,0 +1,14 @@
+class LightningUiKit::RadioGroup::OptionComponent < LightningUiKit::BaseComponent
+  attr_reader :value, :label, :description
+
+  def initialize(value:, label:, description: nil, disabled: false)
+    @value = value
+    @label = label
+    @description = description
+    @disabled = disabled
+  end
+
+  def disabled?
+    @disabled
+  end
+end

data/app/components/lightning_ui_kit/radio_group_component.html.erb

@@ -0,0 +1,60 @@
+<%= tag.div(class: classes, data: data, role: "radiogroup") do %>
+  <%= render_label %>
+  <% if @description %>
+    <%= tag.p(
+      @description,
+      class: "lui:text-base/6 lui:text-foreground-muted lui:data-disabled:opacity-50 lui:sm:text-sm/6",
+      data: description_data
+    ) %>
+  <% end %>
+  <div data-slot="options" class="lui:space-y-3">
+    <% options.each_with_index do |option, index| %>
+      <div
+        role="radio"
+        tabindex="<%= index == 0 ? 0 : -1 %>"
+        aria-checked="<%= selected?(option.value) %>"
+        data-lui-radio-group-target="option"
+        data-value="<%= option.value %>"
+        data-action="click->lui-radio-group#select keydown->lui-radio-group#keydown"
+        class="lui:group lui:flex lui:items-start lui:gap-4 lui:cursor-pointer lui:focus:outline-hidden lui:sm:gap-3"
+        <%= "data-checked" if selected?(option.value) %>
+        <%= "data-disabled" if @disabled || option.disabled? %>
+      >
+        <span class="lui:relative lui:isolate lui:mt-0.5 lui:flex lui:size-[1.125rem] lui:shrink-0 lui:items-center lui:justify-center lui:rounded-full lui:sm:size-4
+          lui:border lui:border-border-strong
+          lui:before:absolute lui:before:inset-0 lui:before:-z-10 lui:before:rounded-full lui:before:bg-surface-input lui:before:shadow-sm
+          lui:after:absolute lui:after:inset-0 lui:after:rounded-full lui:after:shadow-[inset_0_1px_--theme(--color-white/15%)]
+          lui:group-data-checked:border-transparent lui:group-data-checked:bg-(--radio-checked-border) lui:group-data-checked:before:bg-(--radio-checked-bg)
+          lui:group-hover:border-border-hover lui:group-hover:group-data-checked:border-transparent
+          lui:group-data-focus:outline lui:group-data-focus:outline-2 lui:group-data-focus:outline-offset-2 lui:group-data-focus:outline-focus
+          lui:group-data-disabled:opacity-50 lui:group-data-disabled:border-border-strong lui:group-data-disabled:bg-surface-hover
+          lui:group-data-disabled:[--radio-indicator:var(--lui-theme-foreground)]/50 lui:group-data-disabled:before:bg-transparent
+          lui:forced-colors:[--radio-indicator:HighlightText] lui:forced-colors:[--radio-checked-bg:Highlight]
+          lui:forced-colors:group-data-disabled:[--radio-indicator:Highlight]
+          lui:[--radio-checked-bg:var(--lui-theme-surface-invert)] lui:[--radio-checked-border:var(--lui-theme-border-invert)] lui:[--radio-indicator:var(--lui-theme-foreground-invert)]
+          lui:transition-colors lui:duration-150"
+        >
+          <span class="lui:size-2 lui:rounded-full lui:bg-(--radio-indicator) lui:opacity-0 lui:group-data-checked:opacity-100 lui:transition-opacity lui:duration-150"></span>
+        </span>
+        <div class="lui:flex lui:flex-col lui:gap-0.5">
+          <span class="lui:text-base/6 lui:text-foreground lui:select-none lui:group-data-disabled:opacity-50 lui:sm:text-sm/6 lui:font-medium" data-slot="label">
+            <%= option.label %>
+          </span>
+          <% if option.description %>
+            <span class="lui:text-sm/5 lui:text-foreground-muted lui:group-data-disabled:opacity-50">
+              <%= option.description %>
+            </span>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+  <%= render_hidden_field %>
+  <% if has_errors? %>
+    <%= tag.p(
+      error_messages,
+      class: "lui:text-base/6 lui:text-destructive-text lui:data-disabled:opacity-50 lui:sm:text-sm/6",
+      data: error_data
+    ) %>
+  <% end %>
+<% end %>

data/app/components/lightning_ui_kit/radio_group_component.rb

@@ -0,0 +1,70 @@
+class LightningUiKit::RadioGroupComponent < LightningUiKit::BaseComponent
+  include LightningUiKit::Errors
+  include LightningUiKit::Labelable
+
+  renders_many :options, LightningUiKit::RadioGroup::OptionComponent
+
+  def initialize(name:, label: nil, form: nil, error: nil, description: nil, selected: nil, disabled: false, **options)
+    @name = name
+    @label = label
+    @form = form
+    @error = error
+    @description = description
+    @selected = selected
+    @disabled = disabled
+    @options = options
+  end
+
+  def classes
+    merge_classes([
+      "lui:[&>[data-slot=label]+[data-slot=description]]:mt-1 lui:[&>[data-slot=label]+[data-slot=options]]:mt-3 lui:[&>[data-slot=description]+[data-slot=options]]:mt-3 lui:[&>[data-slot=options]+[data-slot=error]]:mt-3 lui:*:data-[slot=label]:font-medium",
+      @options[:class]
+    ].compact.join(" "))
+  end
+
+  def data
+    {
+      controller: "lui-radio-group"
+    }.merge(@options[:data] || {})
+  end
+
+  def label_data
+    {slot: "label"}.tap do |data|
+      data[:disabled] = "true" if @disabled
+    end
+  end
+
+  def description_data
+    {slot: "description"}.tap do |data|
+      data[:disabled] = "true" if @disabled
+    end
+  end
+
+  def error_data
+    {slot: "error"}.tap do |data|
+      data[:disabled] = "true" if @disabled
+    end
+  end
+
+  def render_label
+    return unless render_label?
+
+    tag.label(
+      effective_label,
+      class: "lui:text-base/6 lui:text-foreground lui:select-none lui:data-disabled:opacity-50 lui:sm:text-sm/6",
+      data: label_data
+    )
+  end
+
+  def render_hidden_field
+    if @form
+      @form.hidden_field(@name, value: @selected, data: {lui_radio_group_target: "field"})
+    else
+      helpers.hidden_field_tag(@name, @selected, data: {lui_radio_group_target: "field"})
+    end
+  end
+
+  def selected?(value)
+    @selected.to_s == value.to_s
+  end
+end

data/app/components/lightning_ui_kit/tabs/tab_component.html.erb

@@ -0,0 +1 @@
+<%= content %>

data/app/components/lightning_ui_kit/tabs/tab_component.rb

@@ -0,0 +1,8 @@
+class LightningUiKit::Tabs::TabComponent < LightningUiKit::BaseComponent
+  attr_reader :title
+
+  def initialize(title:, **options)
+    @title = title
+    @options = options
+  end
+end

data/app/components/lightning_ui_kit/tabs_component.html.erb

@@ -0,0 +1,30 @@
+<%= tag.div(class: classes, data: data) do %>
+  <div role="tablist" class="<%= list_classes %>">
+    <% tabs.each_with_index do |tab, index| %>
+      <button
+        type="button"
+        role="tab"
+        id="<%= tab_id(index) %>"
+        aria-controls="<%= panel_id(index) %>"
+        aria-selected="<%= index == @default_tab %>"
+        class="<%= tab_classes %>"
+        data-lui-tabs-target="tab"
+        data-action="click->lui-tabs#select"
+      >
+        <%= tab.title %>
+      </button>
+    <% end %>
+  </div>
+  <% tabs.each_with_index do |tab, index| %>
+    <div
+      role="tabpanel"
+      id="<%= panel_id(index) %>"
+      aria-labelledby="<%= tab_id(index) %>"
+      class="lui:flex-1 lui:outline-hidden lui:hidden"
+      tabindex="0"
+      data-lui-tabs-target="panel"
+    >
+      <%= tab %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/lightning_ui_kit/tabs_component.rb

@@ -0,0 +1,65 @@
+class LightningUiKit::TabsComponent < LightningUiKit::BaseComponent
+  renders_many :tabs, LightningUiKit::Tabs::TabComponent
+
+  VARIANTS = %i[default line].freeze
+
+  def initialize(default_tab: 0, variant: :default, **options)
+    @default_tab = default_tab
+    @variant = VARIANTS.include?(variant) ? variant : :default
+    @options = options
+  end
+
+  def classes
+    merge_classes([
+      "lui:flex lui:flex-col lui:gap-2 lui:w-full",
+      @options[:class]
+    ].compact.join(" "))
+  end
+
+  def data
+    {
+      controller: "lui-tabs",
+      lui_tabs_default_tab_value: @default_tab
+    }.merge(@options[:data] || {})
+  end
+
+  def list_classes
+    base = "lui:inline-flex lui:w-fit lui:items-center lui:justify-center lui:text-foreground-muted"
+    case @variant
+    when :line
+      "#{base} lui:gap-1 lui:rounded-none lui:bg-transparent"
+    else
+      "#{base} lui:h-9 lui:rounded-lg lui:bg-surface-tertiary lui:p-[3px]"
+    end
+  end
+
+  def tab_classes
+    base = "lui:relative lui:inline-flex lui:items-center lui:justify-center lui:gap-1.5 lui:rounded-md lui:px-3 lui:py-1 lui:text-sm lui:font-medium lui:whitespace-nowrap lui:cursor-pointer " \
+           "lui:transition-all lui:duration-150 " \
+           "lui:text-foreground-muted lui:hover:text-foreground " \
+           "lui:focus:outline-hidden lui:focus-visible:outline lui:focus-visible:outline-2 lui:focus-visible:outline-offset-[-2px] lui:focus-visible:outline-focus " \
+           "lui:disabled:pointer-events-none lui:disabled:opacity-50"
+
+    case @variant
+    when :line
+      "#{base} lui:bg-transparent lui:data-[active]:bg-transparent " \
+      "lui:data-[active]:text-foreground " \
+      "lui:after:absolute lui:after:inset-x-0 lui:after:bottom-[-5px] lui:after:h-0.5 lui:after:bg-foreground lui:after:opacity-0 lui:after:transition-opacity lui:data-[active]:after:opacity-100"
+    else
+      "#{base} lui:h-[calc(100%-1px)] lui:border lui:border-transparent " \
+      "lui:data-[active]:bg-surface lui:data-[active]:text-foreground lui:data-[active]:border-border lui:data-[active]:shadow-sm"
+    end
+  end
+
+  def line_variant?
+    @variant == :line
+  end
+
+  def tab_id(index)
+    "tab-#{object_id}-#{index}"
+  end
+
+  def panel_id(index)
+    "panel-#{object_id}-#{index}"
+  end
+end

data/app/javascript/lightning_ui_kit/controllers/radio_group_controller.js

@@ -0,0 +1,74 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["field", "option"];
+
+  select(event) {
+    const option = event.currentTarget;
+    if (option.dataset.disabled !== undefined) return;
+
+    this.activate(option);
+  }
+
+  keydown(event) {
+    const currentIndex = this.optionTargets.indexOf(event.currentTarget);
+    let newIndex;
+
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowRight":
+        event.preventDefault();
+        newIndex = this.nextEnabledIndex(currentIndex, 1);
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        event.preventDefault();
+        newIndex = this.nextEnabledIndex(currentIndex, -1);
+        break;
+      case " ":
+      case "Enter":
+        event.preventDefault();
+        this.activate(event.currentTarget);
+        return;
+      default:
+        return;
+    }
+
+    if (newIndex !== -1) {
+      this.activate(this.optionTargets[newIndex]);
+      this.optionTargets[newIndex].focus();
+    }
+  }
+
+  activate(option) {
+    const value = option.dataset.value;
+
+    this.optionTargets.forEach((opt) => {
+      if (opt === option) {
+        opt.dataset.checked = "";
+        opt.setAttribute("aria-checked", "true");
+        opt.setAttribute("tabindex", "0");
+      } else {
+        delete opt.dataset.checked;
+        opt.setAttribute("aria-checked", "false");
+        opt.setAttribute("tabindex", "-1");
+      }
+    });
+
+    this.fieldTarget.value = value;
+  }
+
+  nextEnabledIndex(currentIndex, direction) {
+    const length = this.optionTargets.length;
+    let index = currentIndex;
+
+    for (let i = 0; i < length; i++) {
+      index = (index + direction + length) % length;
+      if (this.optionTargets[index].dataset.disabled === undefined) {
+        return index;
+      }
+    }
+
+    return -1;
+  }
+}

data/app/javascript/lightning_ui_kit/controllers/tabs_controller.js

@@ -0,0 +1,77 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["tab", "panel"];
+  static values = {
+    defaultTab: { type: Number, default: 0 }
+  };
+
+  connect() {
+    this.activate(this.defaultTabValue);
+  }
+
+  select(event) {
+    event.preventDefault();
+    const index = this.tabTargets.indexOf(event.currentTarget);
+    if (index !== -1) {
+      this.activate(index);
+    }
+  }
+
+  activate(index) {
+    this.tabTargets.forEach((tab, i) => {
+      if (i === index) {
+        tab.dataset.active = "";
+        tab.setAttribute("aria-selected", "true");
+        tab.setAttribute("tabindex", "0");
+      } else {
+        delete tab.dataset.active;
+        tab.setAttribute("aria-selected", "false");
+        tab.setAttribute("tabindex", "-1");
+      }
+    });
+
+    this.panelTargets.forEach((panel, i) => {
+      if (i === index) {
+        panel.classList.remove("lui:hidden");
+      } else {
+        panel.classList.add("lui:hidden");
+      }
+    });
+  }
+
+  tabTargetConnected() {
+    this.tabTargets.forEach((tab) => {
+      tab.addEventListener("keydown", this.handleKeydown.bind(this));
+    });
+  }
+
+  handleKeydown(event) {
+    const currentIndex = this.tabTargets.indexOf(event.currentTarget);
+    let newIndex;
+
+    switch (event.key) {
+      case "ArrowLeft":
+        event.preventDefault();
+        newIndex = currentIndex === 0 ? this.tabTargets.length - 1 : currentIndex - 1;
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        newIndex = currentIndex === this.tabTargets.length - 1 ? 0 : currentIndex + 1;
+        break;
+      case "Home":
+        event.preventDefault();
+        newIndex = 0;
+        break;
+      case "End":
+        event.preventDefault();
+        newIndex = this.tabTargets.length - 1;
+        break;
+      default:
+        return;
+    }
+
+    this.activate(newIndex);
+    this.tabTargets[newIndex].focus();
+  }
+}

data/app/javascript/lightning_ui_kit/index.js

@@ -10,7 +10,7 @@ window.Stimulus = application
 
 import ClipboardController from './controllers/clipboard_controller'
 import CheckboxController from './controllers/checkbox_controller'
-import BannerController from './controllers/banner_controller'
+import AlertController from './controllers/alert_controller'
 import LayoutController from './controllers/layout_controller'
 import MainController from './controllers/main_controller'
 import AccordionController from './controllers/accordion_controller'
@@ -23,11 +23,13 @@ import ToastController from './controllers/toast_controller'
 import TooltipController from './controllers/tooltip_controller'
 import ComboboxController from './controllers/combobox_controller'
 import FieldController from './controllers/field_controller'
+import TabsController from './controllers/tabs_controller'
+import RadioGroupController from './controllers/radio_group_controller'
 
 export function registerLuiControllers(application) {
   application.register(`${namespace}-clipboard`, ClipboardController)
   application.register(`${namespace}-checkbox`, CheckboxController)
-  application.register(`${namespace}-banner`, BannerController)
+  application.register(`${namespace}-alert`, AlertController)
   application.register(`${namespace}-layout`, LayoutController)
   application.register(`${namespace}-main`, MainController)
   application.register(`${namespace}-accordion`, AccordionController)
@@ -40,6 +42,8 @@ export function registerLuiControllers(application) {
   application.register(`${namespace}-tooltip`, TooltipController)
   application.register(`${namespace}-combobox`, ComboboxController)
   application.register(`${namespace}-field`, FieldController)
+  application.register(`${namespace}-tabs`, TabsController)
+  application.register(`${namespace}-radio-group`, RadioGroupController)
 }
 registerLuiControllers(application)