ice_cube-select 4.0.0 → 4.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7307194cfd205d851b5fa951ee356597da543c67fffe1b62ea4ba609f1fc9a24
-  data.tar.gz: db53be2302254f4b4016c7d004063265fdfc331f5ff055bf294bf0ee4be15ff9
+  metadata.gz: b0ad6db675754d206cb69ef4d6ac1bd8bffab4aea41fa6672bf46ff7e0936050
+  data.tar.gz: 287393a490a80e9e499e40678e55fd13e43bd21c945e6e3c63da8440cc97bf83
 SHA512:
-  metadata.gz: e10a7e0c9b65df2aa92f954903c23202ade9a834c6033fe26f6e65faacbbc02ed23c6cd0835a77c3f94d3b19457203ff962b1a26e2abe702a2621d43be35c4d1
-  data.tar.gz: c7d32aa185693e9577e46254b92a4d094fe10712a11f89c560c979bda0f91edbf0ece478af7942ef07b59861aa760d8787399e392b1d8716635fcad0cd9002c4
+  metadata.gz: 49cd9f79c1655b4485d27fe42098b856ba6f00a69d4a7513d73b38b97e8539e401221f8a3b39294d2ef725dd95a3ef8226513b9ba9b7b87830615aca52304483
+  data.tar.gz: 046a25d4e870ba3e96615fa33b910876d439566899d372320cb1bfccd400ee3f3f5709bc62d931f24d5e9da0585f58ad2464387280a44d4fb898258f7a954a77

data/README.md

@@ -1,10 +1,10 @@
 # Ice Cube Select
 
-[![Code Climate](https://codeclimate.com/github/saturnflyer/ice_cube_select.png)](https://codeclimate.com/github/saturnflyer/ice_cube_select)
+[![QLTY](https://qlty.sh/github/gh/ice_cube_select.png)](https://qlty.sh/gh/saturnflyer/ice_cube_select)
 
 This gem adds selectors and helpers for working with recurring schedules in a Rails app. It uses [ice_cube](https://github.com/seejohnrun/ice_cube) recurring scheduling gem.
 
-Check out the [live demo](http://ice-cube-select-demo.herokuapp.com/) (code in [spec/dummy](https://github.com/saturnflyer/ice_cube_select/tree/master/spec/dummy) folder)
+Check out the demo code in [spec/dummy](https://github.com/saturnflyer/ice_cube_select/tree/master/spec/dummy)folder
 
 ## Requirements
 
@@ -22,6 +22,15 @@ Add the gem to your Gemfile:
 gem 'ice_cube-select'
 ```
 
+Then install the assets:
+
+```bash
+bundle install
+rails generate ice_cube_select:install
+```
+
+This copies the CSS and JavaScript files to your `app/assets` directory for use with Propshaft (Rails 8 default asset pipeline).
+
 ### Assets
 
 Include the stylesheet and JavaScript in your layout:
@@ -32,8 +41,6 @@ Include the stylesheet and JavaScript in your layout:
 <%= javascript_include_tag "ice_cube_select_dialog" %>
 ```
 
-Works with Propshaft (Rails 8 default) out of the box.
-
 ### Form Helper
 
 In the form view call the helper:
@@ -131,4 +138,4 @@ To release a new version:
 
 This project rocks and uses MIT-LICENSE.
 
-Based on https://github.com/GetJobber/recurring_select
+Based on https://github.com/gregschmit/recurring_select

data/Rakefile

@@ -1,25 +1,32 @@
 #!/usr/bin/env rake
-require 'rubygems'
-require 'bundler/setup'
+require "rubygems"
+require "bundler/setup"
 
-require 'rspec/core/rake_task'
+require "rspec/core/rake_task"
 RSpec::Core::RakeTask.new(:spec)
-task :default => :spec
 
-require 'rubygems/package_task'
+begin
+  require "standard/rake"
+rescue LoadError
+  # standard not available
+end
+
+task default: :spec
+
+require "rubygems/package_task"
 Bundler::GemHelper.install_tasks
 
-require 'rdoc/task'
+require "rdoc/task"
 RDoc::Task.new(:rdoc) do |rdoc|
-  rdoc.rdoc_dir = 'rdoc'
-  rdoc.title    = 'IceCubeSelect'
-  rdoc.options << '--line-numbers'
-  rdoc.rdoc_files.include('README.rdoc')
-  rdoc.rdoc_files.include('lib/**/*.rb')
+  rdoc.rdoc_dir = "rdoc"
+  rdoc.title = "IceCubeSelect"
+  rdoc.options << "--line-numbers"
+  rdoc.rdoc_files.include("README.rdoc")
+  rdoc.rdoc_files.include("lib/**/*.rb")
 end
 
 APP_RAKEFILE = File.expand_path("../spec/dummy/Rakefile", __FILE__)
-load 'rails/tasks/engine.rake'
+load "rails/tasks/engine.rake"
 
 require "reissue/gem"
 

data/app/assets/javascripts/ice_cube_select_dialog.js

@@ -69,6 +69,8 @@
       if (marginTop < 10) marginTop = 10;
 
       if (initialPositioning) {
+        // Lock content width to prevent dialog from expanding on interactions
+        this.content.style.width = this.content.offsetWidth + 'px';
         this.innerHolder.style.marginTop = marginTop + 'px';
         this.innerHolder.style.minHeight = dialogHeight + 'px';
         this.innerHolder.dispatchEvent(new CustomEvent('ice_cube_select:dialog_positioned'));
@@ -80,7 +82,6 @@
         // Use CSS transition end instead of jQuery animate
         const onTransitionEnd = () => {
           this.innerHolder.classList.remove('animated');
-          this.content.style.width = 'auto';
           this.innerHolder.dispatchEvent(new CustomEvent('ice_cube_select:dialog_positioned'));
           this.innerHolder.removeEventListener('transitionend', onTransitionEnd);
         };
@@ -249,8 +250,6 @@
     }
 
     summaryUpdate() {
-      this.summary.style.width = this.content.offsetWidth + 'px';
-
       if (this.currentRule.hash && this.currentRule.str) {
         this.summary.classList.remove('fetching');
         this.saveButton.classList.remove('disabled');
@@ -306,7 +305,6 @@
     summaryFetchSuccess(data) {
       this.currentRule.str = data;
       this.summaryUpdate();
-      this.content.style.width = 'auto';
     }
 
     initCalendarDays(section) {
@@ -518,7 +516,8 @@
       let dayButtons = '';
       for (let d = firstDay; d < firstDay + 7; d++) {
         const dayOfWeek = d % 7;
-        dayButtons += `<a href="#" data-value="${dayOfWeek}">${texts.days_first_letter[dayOfWeek]}</a>`;
+        const fullDayName = this.fullStringWeekday(dayOfWeek);
+        dayButtons += `<a href="#" data-value="${dayOfWeek}" aria-label="${fullDayName}">${texts.days_first_letter[dayOfWeek]}</a>`;
       }
 
       return `

data/app/assets/stylesheets/ice_cube_select.css

@@ -1,20 +1,153 @@
 /* IceCubeSelect - Dialog Styles */
 
-/* Cancel button X icon (inline SVG) */
+/* ==========================================================================
+   CSS Custom Properties
+
+   QUICK THEMING (modern browsers with OKLCH support):
+   Override just these base values to re-theme the entire component:
+
+     :root {
+       --ice-cube-select-gray-hue: 30;         [warm grays, 0-360]
+       --ice-cube-select-primary-hue: 200;     [accent color hue]
+       --ice-cube-select-primary-chroma: 0.12; [accent saturation]
+       --ice-cube-select-focus-hue: 260;       [focus ring hue]
+     }
+
+   FINE-GRAINED CONTROL:
+   Override individual derived variables (works in all browsers):
+
+     :root {
+       --ice-cube-select-primary: #3b82f6;
+       --ice-cube-select-text: #1f2937;
+     }
+   ========================================================================== */
+
+/* Fallback values for browsers without OKLCH support */
+:root {
+  --ice-cube-select-primary: #677889;
+  --ice-cube-select-primary-gradient-start: #6a7b8c;
+  --ice-cube-select-primary-gradient-end: #677889;
+  --ice-cube-select-text: #222;
+  --ice-cube-select-text-muted: #666;
+  --ice-cube-select-text-disabled: #aaa;
+  --ice-cube-select-text-on-primary: #fff;
+  --ice-cube-select-button-bg: #f5f5f5;
+  --ice-cube-select-button-bg-gradient-end: #f1f1f1;
+  --ice-cube-select-button-bg-hover: #f9f9f9;
+  --ice-cube-select-button-text: #444;
+  --ice-cube-select-button-text-hover: #222;
+  --ice-cube-select-button-save-text: #333;
+  --ice-cube-select-button-cancel-text: #757575;
+  --ice-cube-select-dialog-bg: #f6f6f6;
+  --ice-cube-select-item-bg: #fff;
+  --ice-cube-select-item-bg-hover: #e8e8ed;
+  --ice-cube-select-overlay-bg: rgba(255, 255, 255, 0.2);
+  --ice-cube-select-border: #ccc;
+  --ice-cube-select-border-hover: #aaa;
+  --ice-cube-select-border-dialog: #acacac;
+  --ice-cube-select-border-focus: #1e90ff;
+  --ice-cube-select-shadow-light: rgba(0, 0, 0, 0.1);
+  --ice-cube-select-shadow-medium: rgba(0, 0, 0, 0.2);
+  --ice-cube-select-shadow-dialog: rgba(0, 0, 0, 0.25);
+  --ice-cube-select-loading-text: #999;
+}
+
+/* OKLCH color system for modern browsers */
+@supports (color: oklch(0% 0 0)) {
+  :root {
+    /* =======================================================
+       BASE CONFIGURATION
+       Adjust these to theme the entire component at once
+       ======================================================= */
+
+    /* Gray scale hue - 0 for neutral, adjust for warm/cool tint */
+    --ice-cube-select-gray-hue: 250;
+    --ice-cube-select-gray-chroma: 0.006;
+
+    /* Primary/accent color (selected states) */
+    --ice-cube-select-primary-hue: 250;
+    --ice-cube-select-primary-chroma: 0.04;
+    --ice-cube-select-primary-lightness: 55%;
+
+    /* Focus ring color */
+    --ice-cube-select-focus-hue: 250;
+    --ice-cube-select-focus-chroma: 0.18;
+    --ice-cube-select-focus-lightness: 65%;
+
+    /* =======================================================
+       DERIVED COLORS
+       Automatically calculated from base values above
+       ======================================================= */
+
+    /* Primary/accent */
+    --ice-cube-select-primary: oklch(var(--ice-cube-select-primary-lightness) var(--ice-cube-select-primary-chroma) var(--ice-cube-select-primary-hue));
+    --ice-cube-select-primary-gradient-start: oklch(calc(var(--ice-cube-select-primary-lightness) + 2%) var(--ice-cube-select-primary-chroma) var(--ice-cube-select-primary-hue));
+    --ice-cube-select-primary-gradient-end: var(--ice-cube-select-primary);
+
+    /* Text - gray scale at different lightness levels */
+    --ice-cube-select-text: oklch(25% var(--ice-cube-select-gray-chroma) var(--ice-cube-select-gray-hue));
+    --ice-cube-select-text-muted: oklch(48% var(--ice-cube-select-gray-chroma) var(--ice-cube-select-gray-hue));
+    --ice-cube-select-text-disabled: oklch(70% var(--ice-cube-select-gray-chroma) var(--ice-cube-select-gray-hue));
+    --ice-cube-select-text-on-primary: oklch(100% 0 0);
+
+    /* Buttons */
+    --ice-cube-select-button-bg: oklch(97% var(--ice-cube-select-gray-chroma) var(--ice-cube-select-gray-hue));
+    --ice-cube-select-button-bg-gradient-end: oklch(95% var(--ice-cube-select-gray-chroma) var(--ice-cube-select-gray-hue));
+    --ice-cube-select-button-bg-hover: oklch(98% var(--ice-cube-select-gray-chroma) var(--ice-cube-select-gray-hue));
+    --ice-cube-select-button-text: oklch(35% var(--ice-cube-select-gray-chroma) var(--ice-cube-select-gray-hue));
+    --ice-cube-select-button-text-hover: oklch(25% var(--ice-cube-select-gray-chroma) var(--ice-cube-select-gray-hue));
+    --ice-cube-select-button-save-text: oklch(30% var(--ice-cube-select-gray-chroma) var(--ice-cube-select-gray-hue));
+    --ice-cube-select-button-cancel-text: oklch(52% var(--ice-cube-select-gray-chroma) var(--ice-cube-select-gray-hue));
+
+    /* Backgrounds */
+    --ice-cube-select-dialog-bg: oklch(97% var(--ice-cube-select-gray-chroma) var(--ice-cube-select-gray-hue));
+    --ice-cube-select-item-bg: oklch(100% 0 0);
+    --ice-cube-select-item-bg-hover: oklch(92% 0.012 var(--ice-cube-select-primary-hue));
+    --ice-cube-select-overlay-bg: oklch(100% 0 0 / 20%);
+
+    /* Borders */
+    --ice-cube-select-border: oklch(84% var(--ice-cube-select-gray-chroma) var(--ice-cube-select-gray-hue));
+    --ice-cube-select-border-hover: oklch(73% var(--ice-cube-select-gray-chroma) var(--ice-cube-select-gray-hue));
+    --ice-cube-select-border-dialog: oklch(75% var(--ice-cube-select-gray-chroma) var(--ice-cube-select-gray-hue));
+    --ice-cube-select-border-focus: oklch(var(--ice-cube-select-focus-lightness) var(--ice-cube-select-focus-chroma) var(--ice-cube-select-focus-hue));
+
+    /* Shadows */
+    --ice-cube-select-shadow-light: oklch(0% 0 0 / 10%);
+    --ice-cube-select-shadow-medium: oklch(0% 0 0 / 20%);
+    --ice-cube-select-shadow-dialog: oklch(0% 0 0 / 25%);
+
+    /* Loading state */
+    --ice-cube-select-loading-text: oklch(67% var(--ice-cube-select-gray-chroma) var(--ice-cube-select-gray-hue));
+  }
+}
+
+/* Cancel button X icon (inline SVG with mask for themeable color) */
 .ice_cube_select_dialog_content h4 a {
   float: right;
   height: 16px;
   width: 16px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-/* Loading spinner (inline SVG animation) */
+  background-color: var(--ice-cube-select-text-muted);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+}
+
+/* Loading spinner (inline SVG animation with mask for themeable color) */
 .ice_cube_select_summary.fetching span {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83'%3E%3Canimate attributeName='stroke-opacity' values='1;0.5;1' dur='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
-  background-position: center;
-  background-repeat: no-repeat;
+  background-color: var(--ice-cube-select-loading-text);
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83'%3E%3Canimate attributeName='stroke-opacity' values='1;0.5;1' dur='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83'%3E%3Canimate attributeName='stroke-opacity' values='1;0.5;1' dur='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
   display: inline-block;
   height: 13px;
   width: 13px;
@@ -25,18 +158,18 @@
 /* Resets */
 .ice_cube_select_dialog_holder {
   font-size: 14px;
-  color: black;
+  color: var(--ice-cube-select-text);
 }
 
 .ice_cube_select_dialog_holder a {
-  color: black;
+  color: var(--ice-cube-select-text);
 }
 
 .ice_cube_select_dialog_holder input[type=button] {
   font: small/normal Arial, sans-serif;
-  background: #F5F5F5;
-  color: #444;
-  border: 1px solid #ccc;
+  background: var(--ice-cube-select-button-bg);
+  color: var(--ice-cube-select-button-text);
+  border: 1px solid var(--ice-cube-select-border);
   font-size: 11px;
   font-weight: bold;
   height: 27px;
@@ -45,29 +178,29 @@
   padding: 0 8px;
   text-align: center;
   border-radius: 2px;
-  background-image: linear-gradient(to bottom, #f5f5f5, #f1f1f1);
+  background-image: linear-gradient(to bottom, var(--ice-cube-select-button-bg), var(--ice-cube-select-button-bg-gradient-end));
   cursor: pointer;
 }
 
 .ice_cube_select_dialog_holder input[type=button]:hover {
-  border-color: #aaa;
-  color: #222;
-  background-color: #f9f9f9;
-  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
+  border-color: var(--ice-cube-select-border-hover);
+  color: var(--ice-cube-select-button-text-hover);
+  background-color: var(--ice-cube-select-button-bg-hover);
+  box-shadow: 0px 1px 2px var(--ice-cube-select-shadow-medium);
 }
 
 .ice_cube_select_dialog_holder input[type=button]:focus {
-  border-color: #1E90FF;
+  border-color: var(--ice-cube-select-border-focus);
 }
 
 .ice_cube_select_dialog_holder input[type=button]:active {
-  border-color: #1E90FF;
+  border-color: var(--ice-cube-select-border-focus);
 }
 
 /* Defaults */
 .ice_cube_select_dialog_holder {
   font-family: helvetica, arial, sans-serif;
-  color: #222;
+  color: var(--ice-cube-select-text);
   font-size: 12px;
 }
 
@@ -85,15 +218,15 @@ select option.bold {
   top: 0;
   bottom: 0;
   padding-left: 50%;
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: var(--ice-cube-select-overlay-bg);
   z-index: 50;
 }
 
 /* Dialog box */
 .ice_cube_select_dialog {
-  background-color: #f6f6f6;
-  border: 1px solid #acacac;
-  box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.25);
+  background-color: var(--ice-cube-select-dialog-bg);
+  border: 1px solid var(--ice-cube-select-border-dialog);
+  box-shadow: 1px 3px 8px var(--ice-cube-select-shadow-dialog);
   border-radius: 7px;
   display: inline-block;
   min-width: 200px;
@@ -145,7 +278,7 @@ select option.bold {
 
 /* Day holder (weekly view) */
 .day_holder {
-  border-left: 1px solid #ccc;
+  border-left: 1px solid var(--ice-cube-select-border);
   position: relative;
   margin-top: 5px;
   height: 26px;
@@ -156,25 +289,25 @@ select option.bold {
   padding: 5px 7px;
   font-size: 14px;
   border-style: solid;
-  border-color: #ccc;
+  border-color: var(--ice-cube-select-border);
   border-width: 1px 1px 1px 0;
   float: left;
   text-decoration: none;
   font-weight: bold;
-  box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.1);
-  background-color: #fff;
+  box-shadow: inset 0px 1px 2px var(--ice-cube-select-shadow-light);
+  background-color: var(--ice-cube-select-item-bg);
 }
 
 .day_holder a.selected {
-  background-color: #677889;
-  color: #fff;
-  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
-  background-image: linear-gradient(to bottom, #677890, #677889);
+  background-color: var(--ice-cube-select-primary);
+  color: var(--ice-cube-select-text-on-primary);
+  box-shadow: inset 1px 1px 2px var(--ice-cube-select-shadow-medium);
+  background-image: linear-gradient(to bottom, var(--ice-cube-select-primary-gradient-start), var(--ice-cube-select-primary-gradient-end));
 }
 
 .day_holder a:hover {
   cursor: pointer;
-  background-color: #dde;
+  background-color: var(--ice-cube-select-item-bg-hover);
 }
 
 /* Calendar day/week views */
@@ -191,28 +324,28 @@ select option.bold {
   padding: 5px 3px;
   font-size: 12px;
   border-style: solid;
-  border-color: #ccc;
+  border-color: var(--ice-cube-select-border);
   border-width: 1px;
   margin: -1px 0 0 -1px;
   line-height: 10px;
-  background-color: #fff;
+  background-color: var(--ice-cube-select-item-bg);
   font-weight: bold;
   text-decoration: none;
 }
 
 .ice_cube_select_calendar_day a.selected,
 .ice_cube_select_calendar_week a.selected {
-  background-color: #677889;
-  color: #fff;
-  background-image: linear-gradient(to bottom, #677890, #677889);
-  box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.2);
-  text-shadow: 0 1px 1px #333;
+  background-color: var(--ice-cube-select-primary);
+  color: var(--ice-cube-select-text-on-primary);
+  background-image: linear-gradient(to bottom, var(--ice-cube-select-primary-gradient-start), var(--ice-cube-select-primary-gradient-end));
+  box-shadow: inset 0px 1px 2px var(--ice-cube-select-shadow-medium);
+  text-shadow: 0 1px 1px var(--ice-cube-select-button-save-text);
 }
 
 .ice_cube_select_calendar_day a:hover,
 .ice_cube_select_calendar_week a:hover {
   cursor: pointer;
-  background-color: #dde;
+  background-color: var(--ice-cube-select-item-bg-hover);
 }
 
 .ice_cube_select_calendar_day a.end_of_month {
@@ -235,20 +368,22 @@ select option.bold {
 
 /* Summary section */
 .ice_cube_select_summary {
-  padding: 0;
+  padding: 0 10px 0 0;
   margin-top: 15px;
-  border-top: 1px solid #ccc;
+  border-top: 1px solid var(--ice-cube-select-border);
 }
 
 .ice_cube_select_summary span {
   font-weight: bold;
-  border-top: 1px solid #fff;
+  border-top: 1px solid var(--ice-cube-select-item-bg);
   display: block;
   padding: 10px 0 5px 0;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .ice_cube_select_summary.fetching {
-  color: #999;
+  color: var(--ice-cube-select-loading-text);
 }
 
 .ice_cube_select_summary label {
@@ -268,15 +403,15 @@ select option.bold {
 }
 
 .controls input[type=button].ice_cube_select_save {
-  color: #333;
+  color: var(--ice-cube-select-button-save-text);
 }
 
 .controls input[type=button].ice_cube_select_cancel {
-  color: #666;
+  color: var(--ice-cube-select-text-muted);
 }
 
 .controls input[type=button].disabled {
-  color: #aaa;
+  color: var(--ice-cube-select-text-disabled);
 }
 
 /* Animated state */
@@ -293,5 +428,5 @@ select option.bold {
 
 /* Cancel button styling */
 #ice_cube_select_cancel_button {
-  color: #757575;
+  color: var(--ice-cube-select-button-cancel-text);
 }

data/gemfiles/Gemfile.rails-8.0

@@ -8,3 +8,9 @@ gem "rspec", ">= 2.14", "< 4"
 gem "rspec-rails", ">= 2.14", "< 8"
 gem "rake"
 gem "reissue"
+gem "standard"
+
+gem "capybara"
+gem "capybara-playwright-driver"
+gem "puma"
+gem "simplecov"

data/lib/generators/ice_cube_select/INSTALL

@@ -0,0 +1,24 @@
+===============================================================================
+
+  ice_cube_select assets have been installed!
+
+  Files copied:
+  - app/assets/stylesheets/ice_cube_select.css
+  - app/assets/javascripts/ice_cube_select.js
+  - app/assets/javascripts/ice_cube_select_dialog.js
+
+  Next steps:
+
+  1. Include the assets in your layout (app/views/layouts/application.html.erb):
+
+     <%= stylesheet_link_tag 'ice_cube_select', 'data-turbo-track': 'reload' %>
+     <%= javascript_include_tag 'ice_cube_select', 'data-turbo-track': 'reload' %>
+     <%= javascript_include_tag 'ice_cube_select_dialog', 'data-turbo-track': 'reload' %>
+
+  2. Use in your forms:
+
+     <%= f.ice_cube_select :schedule, :start_date => Date.today %>
+
+  For more information, visit: https://github.com/saturnflyer/ice_cube_select
+
+===============================================================================

data/lib/generators/ice_cube_select/install_generator.rb

@@ -0,0 +1,32 @@
+require "rails/generators"
+
+module IceCubeSelect
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      source_root File.expand_path("../../../../app/assets", __FILE__)
+
+      desc "Copies ice_cube_select assets to your application for use with Propshaft"
+
+      def copy_stylesheets
+        copy_file "stylesheets/ice_cube_select.css",
+          "app/assets/stylesheets/ice_cube_select.css"
+      end
+
+      def copy_javascripts
+        copy_file "javascripts/ice_cube_select.js",
+          "app/assets/javascripts/ice_cube_select.js"
+        copy_file "javascripts/ice_cube_select_dialog.js",
+          "app/assets/javascripts/ice_cube_select_dialog.js"
+      end
+
+      def show_readme
+        return unless behavior == :invoke
+
+        install_path = File.join(File.dirname(__FILE__), "INSTALL")
+        if File.exist?(install_path)
+          say File.read(install_path), :green
+        end
+      end
+    end
+  end
+end

data/lib/helpers/ice_cube_select_helper.rb

@@ -13,17 +13,16 @@ module IceCubeSelectHelper
         @template.class.send(:include, IceCubeSelectHelper::FormHelper)
       end
 
-      @template.select_recurring(@object_name, method, default_schedules, options.merge(:object => @object), html_options)
+      @template.select_recurring(@object_name, method, default_schedules, options.merge(object: @object), html_options)
     end
   end
 
   module FormOptionsHelper
     def recurring_options_for_select(currently_selected_rule = nil, default_schedules = nil, options = {})
-
       options_array = []
       blank_option_label = options[:blank_label] || I18n.t("ice_cube_select.not_recurring")
       blank_option = [blank_option_label, "null"]
-      separator = [I18n.t("ice_cube_select.or"), {:disabled => true}]
+      separator = [I18n.t("ice_cube_select.or"), {disabled: true}]
 
       if default_schedules.blank?
         if currently_selected_rule.present?
@@ -38,11 +37,11 @@ module IceCubeSelectHelper
       else
         options_array << blank_option if options[:allow_blank]
 
-        options_array += default_schedules.collect{|dc|
+        options_array += default_schedules.collect { |dc|
           ice_cube_rule_to_option(dc)
         }
 
-        if currently_selected_rule.present? and !current_rule_in_defaults?(currently_selected_rule, default_schedules)
+        if currently_selected_rule.present? && !current_rule_in_defaults?(currently_selected_rule, default_schedules)
           options_array << ice_cube_rule_to_option(currently_selected_rule, true)
           custom_label = [I18n.t("ice_cube_select.new_custom_schedule"), "custom"]
         else
@@ -73,7 +72,7 @@ module IceCubeSelectHelper
     end
 
     def current_rule_in_defaults?(currently_selected_rule, default_schedules)
-      default_schedules.any?{|option|
+      default_schedules.any? { |option|
         option == currently_selected_rule or
           (option.is_a?(Array) and option[1] == currently_selected_rule)
       }

data/lib/ice_cube_select/engine.rb

@@ -3,7 +3,6 @@ require "middleware/ice_cube_select_middleware"
 
 module IceCubeSelect
   class Engine < Rails::Engine
-
     initializer "ice_cube_select.extending_form_builder" do |app|
       ActionView::Helpers::FormHelper.include(IceCubeSelectHelper::FormHelper)
       ActionView::Helpers::FormOptionsHelper.include(IceCubeSelectHelper::FormOptionsHelper)
@@ -13,6 +12,5 @@ module IceCubeSelect
     initializer "ice_cube_select.connecting_middleware" do |app|
       app.middleware.use IceCubeSelectMiddleware
     end
-
   end
 end

data/lib/ice_cube_select/version.rb

@@ -1,3 +1,3 @@
 module IceCubeSelect
-  VERSION = "4.0.0"
+  VERSION = "4.0.2"
 end