panda-core 0.12.5 → 1.1.0

data/app/assets/tailwind/application.css

@@ -1,6 +1,9 @@
 @import 'tailwindcss';
 
 @theme {
+  /* Custom spacing for page tree indentation */
+  --spacing-18: 4.5rem;
+
   /* Legacy colors - DEPRECATED: Use primary-* scale instead */
   /* Fallback values ensure UI is visible even without data-theme attribute */
   --color-white: #f9f9f9;
@@ -30,6 +33,8 @@
   /* Semantic colors - Success (Green) */
   --color-success-50: #f0fdf4;
   --color-success-100: #dcfce7;
+  --color-success-200: #bbf7d0;
+  --color-success-300: #86efac;
   --color-success-500: #22c55e;
   --color-success-600: #16a34a;
   --color-success-700: #15803d;
@@ -37,6 +42,8 @@
   /* Semantic colors - Error (Red) */
   --color-error-50: #fef2f2;
   --color-error-100: #fee2e2;
+  --color-error-200: #fecaca;
+  --color-error-300: #fca5a5;
   --color-error-500: #ef4444;
   --color-error-600: #dc2626;
   --color-error-700: #b91c1c;
@@ -115,6 +122,8 @@
     /* Semantic colors - Success (Green) */
     --color-success-50: rgb(240, 253, 244); /* green-50 */
     --color-success-100: rgb(220, 252, 231); /* green-100 */
+    --color-success-200: rgb(187, 247, 208); /* green-200 */
+    --color-success-300: rgb(134, 239, 172); /* green-300 */
     --color-success-500: rgb(34, 197, 94); /* green-500 */
     --color-success-600: rgb(22, 163, 74); /* green-600 */
     --color-success-700: rgb(21, 128, 61); /* green-700 */
@@ -122,6 +131,8 @@
     /* Semantic colors - Error (Red) */
     --color-error-50: rgb(254, 242, 242); /* red-50 */
     --color-error-100: rgb(254, 226, 226); /* red-100 */
+    --color-error-200: rgb(254, 202, 202); /* red-200 */
+    --color-error-300: rgb(252, 165, 165); /* red-300 */
     --color-error-500: rgb(239, 68, 68); /* red-500 */
     --color-error-600: rgb(220, 38, 38); /* red-600 */
     --color-error-700: rgb(185, 28, 28); /* red-700 */
@@ -152,9 +163,55 @@
     --color-gray-800: rgb(31, 41, 55);
     --color-gray-900: rgb(17, 24, 39);
     --color-gray-950: rgb(3, 7, 18);
+
+    /*
+     * Panda admin chrome tokens — opt-in theming for the residual gem-rendered
+     * admin surfaces (PanelComponent, TableComponent, TagComponent badges, form
+     * inputs, the custom-select trigger, checkbox accent). Every value below is
+     * a var() reference to an existing token, so it resolves to exactly today's
+     * literal colour — this block changes nothing visually for the default
+     * theme. Host apps (e.g. Panda CMS) that never set a theme, or that use
+     * "default"/"sky", are unaffected. A host app can override any of these
+     * tokens directly instead of adopting a whole new html[data-theme] block.
+     */
+    --panda-panel-bg: var(--color-white);
+    --panda-panel-border: var(--color-gray-200);
+    --panda-panel-radius: var(--radius-2xl);
+    --panda-table-header-bg: var(--color-gray-50);
+    --panda-table-border: var(--color-gray-200);
+    --panda-table-row-border: color-mix(in srgb, var(--color-gray-200) 70%, transparent);
+    --panda-table-cell-color: var(--color-gray-600);
+    --panda-badge-success-bg: var(--color-emerald-50);
+    --panda-badge-success-fg: var(--color-emerald-600);
+    --panda-badge-warning-bg: var(--color-amber-50);
+    --panda-badge-warning-fg: var(--color-amber-600);
+    --panda-badge-info-bg: var(--color-sky-50);
+    --panda-badge-info-fg: var(--color-sky-600);
+    --panda-badge-error-bg: var(--color-rose-50);
+    --panda-badge-error-fg: var(--color-rose-600);
+    --panda-badge-neutral-bg: var(--color-gray-100);
+    --panda-badge-neutral-fg: var(--color-gray-600);
+    --panda-input-border: var(--color-gray-300);
+    --panda-input-radius: var(--radius-xl);
+    --panda-input-focus-ring: var(--color-primary-500);
+    --panda-select-trigger-border: var(--color-gray-200);
+    --panda-checkbox-accent: var(--color-primary-500);
   }
 
-  html[data-theme='ocean'] {
+  /*
+   * NAMING NOTE (2026-07): this block was briefly named `html[data-theme='ocean']`
+   * (commit aa7f021, "Update color palette to Glacier/Teal theme"), diverging from
+   * `Panda::Core.config.available_themes`, which has always shipped
+   * `[["Default", "default"], ["Sky", "sky"]]` (since the auth migration from
+   * panda-cms). Since `available_themes` populates the theme <select> in
+   * my_profile/edit.html.erb, any user who picked the second theme before aa7f021
+   * — or since, via a host app that left available_themes at its default — has
+   * "sky" persisted in `current_theme`, not "ocean". Renaming the CSS block back
+   * to `sky` (rather than renaming the config to `ocean`) restores that match
+   * without silently losing anyone's saved preference. Do not rename this block
+   * without also migrating `Panda::Core::User#current_theme` data.
+   */
+  html[data-theme='sky'] {
     --color-white: rgb(249, 249, 249); /* #F9F9F9 */
     --color-black: rgb(26, 22, 29); /* #1A161D */
 
@@ -170,7 +227,7 @@
     --color-inactive: rgb(219, 234, 254); /* blue-100 */
     --color-error: rgb(220, 38, 38); /* red-600 */
 
-    /* Primary color scale - Ocean (Blue) */
+    /* Primary color scale - Sky (Blue) */
     --color-primary-50: rgb(239, 246, 255); /* blue-50 */
     --color-primary-100: rgb(219, 234, 254); /* blue-100 */
     --color-primary-200: rgb(191, 219, 254); /* blue-200 */
@@ -186,6 +243,8 @@
     /* Semantic colors - Success (Green) */
     --color-success-50: rgb(240, 253, 244);
     --color-success-100: rgb(220, 252, 231);
+    --color-success-200: rgb(187, 247, 208);
+    --color-success-300: rgb(134, 239, 172);
     --color-success-500: rgb(34, 197, 94);
     --color-success-600: rgb(22, 163, 74);
     --color-success-700: rgb(21, 128, 61);
@@ -193,6 +252,8 @@
     /* Semantic colors - Error (Red) */
     --color-error-50: rgb(254, 242, 242);
     --color-error-100: rgb(254, 226, 226);
+    --color-error-200: rgb(254, 202, 202);
+    --color-error-300: rgb(252, 165, 165);
     --color-error-500: rgb(239, 68, 68);
     --color-error-600: rgb(220, 38, 38);
     --color-error-700: rgb(185, 28, 28);
@@ -204,7 +265,7 @@
     --color-warning-600: rgb(217, 119, 6);
     --color-warning-700: rgb(180, 83, 9);
 
-    /* Semantic colors - Info (Teal - different from primary for ocean theme) */
+    /* Semantic colors - Info (Teal - different from primary for sky theme) */
     --color-info-50: rgb(241, 249, 250);
     --color-info-100: rgb(219, 238, 242);
     --color-info-500: rgb(60, 135, 158);
@@ -223,19 +284,69 @@
     --color-gray-800: rgb(31, 41, 55);
     --color-gray-900: rgb(17, 24, 39);
     --color-gray-950: rgb(3, 7, 18);
-  }
 
-  a.block-link:after {
-    position: absolute;
-    content: '';
-    inset: 0;
+    /* Panda admin chrome tokens — see html[data-theme='default'] for the
+       full explanation. Same literal colours as default: these are
+       theme-agnostic chrome tokens, unaffected by the sky/default primary
+       colour split. */
+    --panda-panel-bg: var(--color-white);
+    --panda-panel-border: var(--color-gray-200);
+    --panda-panel-radius: var(--radius-2xl);
+    --panda-table-header-bg: var(--color-gray-50);
+    --panda-table-border: var(--color-gray-200);
+    --panda-table-row-border: color-mix(in srgb, var(--color-gray-200) 70%, transparent);
+    --panda-table-cell-color: var(--color-gray-600);
+    --panda-badge-success-bg: var(--color-emerald-50);
+    --panda-badge-success-fg: var(--color-emerald-600);
+    --panda-badge-warning-bg: var(--color-amber-50);
+    --panda-badge-warning-fg: var(--color-amber-600);
+    --panda-badge-info-bg: var(--color-sky-50);
+    --panda-badge-info-fg: var(--color-sky-600);
+    --panda-badge-error-bg: var(--color-rose-50);
+    --panda-badge-error-fg: var(--color-rose-600);
+    --panda-badge-neutral-bg: var(--color-gray-100);
+    --panda-badge-neutral-fg: var(--color-gray-600);
+    --panda-input-border: var(--color-gray-300);
+    --panda-input-radius: var(--radius-xl);
+    --panda-input-focus-ring: var(--color-primary-500);
+    --panda-select-trigger-border: var(--color-gray-200);
+    --panda-checkbox-accent: var(--color-primary-500);
   }
 
-  /* Admin gradient backgrounds - neutral gray for chrome */
+  /*
+   * Bring-your-own theme: host apps can supply additional theme blocks in
+   * their own stylesheets — the gem does not need to know about them. A
+   * consuming app:
+   *
+   *   1. Registers the theme so it appears in the My Profile dropdown and
+   *      can be the default:
+   *        config.available_themes = [["Default", "default"], ["Acme", "acme"]]
+   *        config.default_theme = "acme"
+   *      (assigning available_themes REPLACES the gem's default list)
+   *   2. Ships a stylesheet defining the variables, loaded on gem-rendered
+   *      pages via config.additional_head_content (rendered in the <head>
+   *      of every admin layout, including the login page):
+   *        html[data-theme='acme'] {
+   *          --color-primary-500: ...;    /- brand scale, if desired -/
+   *          --gradient-admin-from: ...;  /- sidebar/login gradient -/
+   *          --panda-panel-bg: ...;       /- any of the chrome tokens -/
+   *        }
+   *
+   * HeaderComponent stamps data-theme from Current.user&.current_theme ||
+   * config.default_theme on <html>, so the block activates automatically.
+   * Any token left undefined falls back to the gem default.
+   */
+
+  /* Admin gradient backgrounds - customizable via CSS custom properties */
   .bg-gradient-admin {
-    background: linear-gradient(to bottom right, rgb(17, 24, 39), rgb(55, 65, 81));
+    background: linear-gradient(to bottom right, var(--gradient-admin-from, rgb(17, 24, 39)), var(--gradient-admin-to, rgb(55, 65, 81)));
     border-bottom-left-radius: 0;
   }
+
+  /* Clickable table rows containing a block-link */
+  .table-row:has(a.block-link) {
+    cursor: pointer;
+  }
 }
 
 /* Form input styles */
@@ -252,33 +363,61 @@
   input[type='month'],
   input[type='week'],
   input[type='time'],
-  input[type='search'],
+  input[type='search'] {
+    @apply block w-full h-11 rounded-xl border border-gray-300 px-3 py-2 text-gray-900;
+    @apply placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-primary-500;
+    @apply dark:bg-white/5 dark:text-white dark:border-white/10 dark:placeholder:text-gray-500;
+    @apply disabled:border-gray-200 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed;
+    background-color: #fff;
+    /* Themeable border/radius/focus-ring — see --panda-input-* tokens above.
+       Fallbacks match the @apply values on this rule exactly, so this is a
+       no-op for consumers that never set a data-theme. */
+    border-color: var(--panda-input-border, var(--color-gray-300));
+    border-radius: var(--panda-input-radius, var(--radius-xl));
+
+    &:focus {
+      outline-color: var(--panda-input-focus-ring, var(--color-primary-500));
+    }
+  }
+
   textarea {
-    @apply block w-full rounded-md border-0 p-2 text-gray-900 bg-white;
-    @apply ring-1 ring-inset ring-primary-400 placeholder:text-gray-400;
-    @apply focus:ring-2 focus:ring-inset focus:ring-primary-600;
-    @apply hover:cursor-pointer sm:leading-6;
-    @apply disabled:ring-gray-300 disabled:focus:ring-gray-300 disabled:bg-gray-50 disabled:cursor-not-allowed;
+    @apply block w-full rounded-xl border border-gray-300 px-3 py-2 text-gray-900;
+    @apply placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-primary-500;
+    @apply dark:bg-white/5 dark:text-white dark:border-white/10 dark:placeholder:text-gray-500;
+    @apply disabled:border-gray-200 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed;
+    background-color: #fff;
+    border-color: var(--panda-input-border, var(--color-gray-300));
+    border-radius: var(--panda-input-radius, var(--radius-xl));
+
+    &:focus {
+      outline-color: var(--panda-input-focus-ring, var(--color-primary-500));
+    }
   }
 
   /* Select specific styling */
   select {
-    @apply block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 bg-white;
-    @apply ring-1 ring-inset ring-primary-400;
-    @apply focus:ring-2 focus:ring-inset focus:ring-primary-600;
-    @apply hover:cursor-pointer sm:leading-6;
-    @apply disabled:ring-gray-300 disabled:focus:ring-gray-300 disabled:bg-gray-50 disabled:cursor-not-allowed;
+    @apply block w-full h-11 rounded-xl border border-gray-300 px-3 py-2 text-gray-900;
+    @apply focus:outline-2 focus:-outline-offset-2 focus:outline-primary-500;
+    @apply dark:bg-white/5 dark:text-white dark:border-white/10;
+    @apply disabled:border-gray-200 disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed;
     @apply appearance-none bg-right bg-no-repeat;
+    background-color: #fff;
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
-    background-position: right 0.5rem center;
-    background-size: 1.5em 1.5em;
+    background-position: right 0.75rem center;
+    background-size: 1.25em 1.25em;
+    border-color: var(--panda-input-border, var(--color-gray-300));
+    border-radius: var(--panda-input-radius, var(--radius-xl));
+
+    &:focus {
+      outline-color: var(--panda-input-focus-ring, var(--color-primary-500));
+    }
   }
 
   /* Checkbox and radio styling */
   input[type='checkbox'],
   input[type='radio'] {
-    @apply w-4 h-4 text-primary-600 bg-white border-gray-300 rounded transition-colors duration-200;
-    @apply focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
+    @apply w-5 h-5 text-primary-600 bg-white border-gray-300 rounded-md transition-colors duration-200;
+    @apply focus:outline-2 focus:outline-offset-2 focus:outline-primary-500;
     @apply disabled:bg-gray-100 disabled:cursor-not-allowed;
   }
 
@@ -286,9 +425,16 @@
     @apply rounded-full;
   }
 
+  /* Ensure form controls use primary brand color. Checkbox/radio accent is
+     themeable independently of primary-500 via --panda-checkbox-accent
+     (falls back to primary-500, today's behaviour, when unset). */
+  input, select, textarea {
+    accent-color: var(--panda-checkbox-accent, var(--color-primary-500));
+  }
+
   /* Label styling */
   label {
-    @apply block text-sm font-medium text-gray-700 mb-1;
+    @apply block text-xs font-semibold text-gray-500 mb-1;
   }
 
   /* Field wrapper styling */
@@ -300,7 +446,7 @@
   input.error,
   textarea.error,
   select.error {
-    @apply ring-error-500 focus:ring-error-500;
+    @apply outline-error-500 focus:outline-error-500;
   }
 
   .field-error {
@@ -309,8 +455,8 @@
 
   /* Button styling */
   .btn {
-    @apply inline-flex items-center justify-center px-6 py-3 text-base font-semibold rounded-md transition-colors duration-200;
-    @apply focus-visible:outline-2 focus-visible:outline-offset-2;
+    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-xl transition-colors duration-200;
+    @apply focus-visible:outline-2 focus-visible:outline-offset-2 shadow-sm;
     @apply disabled:opacity-50 disabled:cursor-not-allowed;
   }
 
@@ -319,22 +465,22 @@
   }
 
   .btn-secondary {
-    @apply bg-gray-200 text-gray-900 hover:bg-gray-300 focus-visible:outline-gray-500;
+    @apply border border-gray-200 bg-white text-gray-700 hover:bg-gray-50 focus-visible:outline-gray-300;
   }
 
   .btn-danger {
-    @apply bg-error-600 text-white hover:bg-error-700 focus-visible:outline-error-600;
+    @apply border border-error-200 bg-error-50 text-error-600 hover:bg-error-100 focus-visible:outline-error-300;
   }
 
   .btn-success {
-    @apply bg-success-600 text-white hover:bg-success-700 focus-visible:outline-success-600;
+    @apply border border-success-200 bg-success-50 text-success-600 hover:bg-success-100 focus-visible:outline-success-300;
   }
 
-  a.block-link:after {
-    position: absolute;
-    content: '';
-    inset: 0;
+  /* Custom select dropdown */
+  [data-controller="custom-select"] {
+    position: relative;
   }
+
 }
 
 /* EditorJS content styles */
@@ -457,3 +603,57 @@
     }
   }
 }
+
+/* Page tree indentation utilities - must be explicitly defined because
+   they're used in panda-cms views which aren't scanned by this build */
+@layer utilities {
+  .ml-18 {
+    margin-left: var(--spacing-18, 4.5rem);
+  }
+
+  /* ButtonComponent action classes - generated dynamically in Ruby, so must be explicitly defined */
+  .bg-primary-500 {
+    background-color: var(--color-primary-500);
+  }
+
+  .bg-primary-600 {
+    background-color: var(--color-primary-600);
+  }
+
+  .hover\:bg-primary-600:hover {
+    background-color: var(--color-primary-600);
+  }
+
+  .focus-visible\:outline-primary-600:focus-visible {
+    outline-color: var(--color-primary-600);
+  }
+
+  /* Sidebar navigation classes - used in dynamic Ruby string interpolation */
+  .space-y-0\.5 > :not(:last-child) {
+    margin-bottom: 0.125rem;
+  }
+
+  .pl-6 {
+    padding-left: 1.5rem;
+  }
+
+  .pl-8 {
+    padding-left: 2rem;
+  }
+
+  .pr-2 {
+    padding-right: 0.5rem;
+  }
+
+  .text-white\/90 {
+    color: rgb(255 255 255 / 0.9);
+  }
+
+  .border-white\/20 {
+    border-color: rgb(255 255 255 / 0.2);
+  }
+
+  .hover\:bg-primary-500\/40:hover {
+    background-color: color-mix(in srgb, var(--color-primary-500) 40%, transparent);
+  }
+}

data/app/builders/panda/core/form_builder.rb

@@ -10,6 +10,12 @@ module Panda
         super(attribute, text, options.reverse_merge(class: label_styles))
       end
 
+      # Override field_id to match FormBuilder's signature, since the included
+      # FormTagHelper defines a field_id with a different arity that shadows it.
+      def field_id(method, *suffixes, namespace: @options[:namespace], index: @options[:index])
+        @template.field_id(@object_name, method, *suffixes, namespace: namespace, index: index)
+      end
+
       def text_field(attribute, options = {})
         # Extract custom label if provided
         custom_label = options.delete(:label)
@@ -48,6 +54,22 @@ module Panda
         end
       end
 
+      def telephone_field(method, options = {})
+        custom_label = options.delete(:label)
+
+        content_tag :div, class: container_styles do
+          label(method, custom_label) + meta_text(options) + super(method, options.reverse_merge(class: input_styles)) + error_message(method)
+        end
+      end
+
+      def url_field(method, options = {})
+        custom_label = options.delete(:label)
+
+        content_tag :div, class: container_styles do
+          label(method, custom_label) + meta_text(options) + super(method, options.reverse_merge(class: input_styles)) + error_message(method)
+        end
+      end
+
       def datetime_field(method, options = {})
         # Extract custom label if provided
         custom_label = options.delete(:label)
@@ -57,6 +79,31 @@ module Panda
         end
       end
 
+      def datetime_split_field(method, options = {})
+        custom_label = options.delete(:label)
+        value = object.respond_to?(method) ? object.send(method) : nil
+
+        content_tag :div, class: container_styles, data: {controller: "datetime"} do
+          label(method, custom_label) +
+            meta_text(options) +
+            hidden_field(method, data: {datetime_target: "combinedField"}, value: value&.iso8601) +
+            content_tag(:div, class: "flex gap-3") do
+              @template.tag.input(
+                type: "date",
+                class: input_styles,
+                data: {datetime_target: "dateField", action: "change->datetime#update"}
+              ) +
+                @template.tag.input(
+                  type: "time",
+                  step: "60",
+                  class: input_styles,
+                  data: {datetime_target: "timeField", action: "change->datetime#update"}
+                )
+            end +
+            error_message(method)
+        end
+      end
+
       def text_area(method, options = {})
         # Extract custom label if provided
         custom_label = options.delete(:label)
@@ -75,12 +122,24 @@ module Panda
         end
       end
 
-      def select(method, choices = nil, options = {}, html_options = {})
+      def number_field(method, options = {})
         # Extract custom label if provided
         custom_label = options.delete(:label)
 
         content_tag :div, class: container_styles do
-          label(method, custom_label) + meta_text(options) + super(method, choices, options, html_options.reverse_merge(class: select_styles)) + select_svg + error_message(method)
+          label(method, custom_label) + meta_text(options) + super(method, options.reverse_merge(class: input_styles)) + error_message(method)
+        end
+      end
+
+      def select(method, choices = nil, options = {}, html_options = {})
+        # Extract custom label if provided
+        custom_label = options.delete(:label)
+
+        html_options = html_options.reverse_merge(class: select_styles)
+        html_options[:data] = (html_options[:data] || {}).merge("custom-select-target": "select")
+
+        content_tag :div, class: container_styles, data: {controller: "custom-select"} do
+          label(method, custom_label) + meta_text(options) + super(method, choices, options, html_options) + select_svg + error_message(method)
         end
       end
 
@@ -88,19 +147,25 @@ module Panda
         # Extract custom label if provided
         custom_label = options.delete(:label)
 
-        content_tag :div, class: container_styles do
-          label(method, custom_label) + meta_text(options) + super(method, collection, value_method, text_method, options, html_options.reverse_merge(class: input_styles)) + error_message(method)
+        html_options = html_options.reverse_merge(class: input_styles)
+        html_options[:data] = (html_options[:data] || {}).merge("custom-select-target": "select")
+
+        content_tag :div, class: container_styles, data: {controller: "custom-select"} do
+          label(method, custom_label) + meta_text(options) + super(method, collection, value_method, text_method, options, html_options) + error_message(method)
         end
       end
 
       def time_zone_select(method, priority_zones = nil, options = {}, html_options = {})
-        wrap_field(method, options) do
-          super(
+        html_options = html_options.reverse_merge(class: select_styles)
+        html_options[:data] = (html_options[:data] || {}).merge("custom-select-target": "select")
+
+        content_tag :div, class: container_styles, data: {controller: "custom-select"} do
+          label(method) + meta_text(options) + super(
             method,
             priority_zones,
             options,
-            html_options.reverse_merge(class: select_styles)
-          )
+            html_options
+          ) + error_message(method)
         end
       end
 
@@ -125,8 +190,7 @@ module Panda
           content_tag :div, class: container_styles do
             label(method, custom_label) +
               meta_text(options) +
-              # Cropper stylesheet
-              @template.content_tag(:link, nil, rel: "stylesheet", href: "https://cdn.jsdelivr.net/npm/cropperjs@1.6.2/dist/cropper.min.css") +
+              # Note: cropperjs 2.x uses Web Components with built-in styles — no external CSS needed
               # File input
               content_tag(:div, class: "mt-2") do
                 super(method, options.reverse_merge(
@@ -262,7 +326,7 @@ module Panda
         value ||= submit_default_value
 
         # Use the primary color for save/create actions
-        action = object.persisted? ? :save : :create
+        action = object&.persisted? ? :save : :create
         button_classes = case action
         when :save, :create
           "text-white bg-primary-500 hover:bg-primary-600"
@@ -287,16 +351,48 @@ module Panda
         custom_label = options.delete(:label)
 
         content_tag :div, class: container_styles do
-          label(method, custom_label) + meta_text(options) + super(method, options.reverse_merge(class: "border-gray-300 ml-2"), checked_value, unchecked_value)
+          label(method, custom_label) + meta_text(options) + super(method, options.reverse_merge(class: "border-gray-300 text-primary-600 focus:ring-primary-500 ml-2"), checked_value, unchecked_value)
         end
       end
 
       def date_field(method, options = {})
-        # Extract custom label if provided
         custom_label = options.delete(:label)
+        date_min = options.delete(:min)
+        date_max = options.delete(:max)
 
-        content_tag :div, class: container_styles do
-          label(method, custom_label) + meta_text(options) + super(method, options.reverse_merge(class: input_styles))
+        # Format current value for display
+        raw_value = object.respond_to?(method) ? object.send(method) : nil
+        iso_value = if raw_value.respond_to?(:strftime)
+          raw_value.strftime("%Y-%m-%d")
+        else
+          raw_value
+        end
+        display_value = if raw_value.respond_to?(:strftime)
+          raw_value.strftime("%-d %b %Y")
+        elsif raw_value.is_a?(String) && raw_value.present?
+          raw_value
+        else
+          ""
+        end
+
+        controller_data = {controller: "datepicker"}
+        controller_data[:datepicker_date_min_value] = date_min.to_s if date_min
+        controller_data[:datepicker_date_max_value] = date_max.to_s if date_max
+
+        content_tag :div, class: "#{container_styles} relative", data: controller_data do
+          label(method, custom_label) +
+            meta_text(options) +
+            hidden_field(method, value: iso_value, data: {datepicker_target: "hidden"}) +
+            @template.text_field_tag(
+              nil,
+              display_value,
+              class: "#{input_styles} cursor-pointer",
+              readonly: true,
+              placeholder: options[:placeholder] || "Select date...",
+              data: {datepicker_target: "display", action: "click->datepicker#toggle focus->datepicker#toggle"}
+            ) +
+            content_tag(:div, "", class: "hidden absolute z-50 mt-1 left-0", data: {datepicker_target: "calendar"}) +
+            error_message(method)
         end
       end
 
@@ -332,8 +428,8 @@ module Panda
       end
 
       def section_heading(text, options = {})
-        @template.content_tag(:div, class: "-mx-4 sm:-mx-6 px-4 sm:px-6 py-4 bg-gray-200 dark:bg-gray-700 mb-6") do
-          @template.content_tag(:h3, text, class: "text-base font-semibold text-gray-900 dark:text-white")
+        @template.content_tag(:div, class: "mt-6 pt-4 border-t border-gray-200 mb-4") do
+          @template.content_tag(:h3, text, class: "text-sm font-semibold text-gray-700")
         end
       end
 
@@ -383,7 +479,13 @@ module Panda
       end
 
       def submit_default_value
-        object.persisted? ? "Update #{object.class.name.demodulize}" : "Create #{object.class.name.demodulize}"
+        if object.nil?
+          "Submit"
+        elsif object.persisted?
+          "Update #{object.class.name.demodulize}"
+        else
+          "Create #{object.class.name.demodulize}"
+        end
       end
 
       def wrap_field(method, options = {}, &block)

data/app/components/panda/core/UI/badge.html.erb

@@ -0,0 +1,10 @@
+<%= content_tag :span, @attrs do %>
+  <%= text %>
+  <% if removable? %>
+    <%= content_tag :button, type: "button", class: "inline-flex items-center ml-1 hover:opacity-70", aria: { label: "Remove" } do %>
+      <%= content_tag :svg, class: "h-3 w-3", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor" do %>
+        <%= tag.path d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>